我有两个divs(左一个是图像)在一个包装的意思是彼此相邻,div在右侧被定位为绝对右边:0和底部:0,因此它位于左边div图像的底部。问题是,当屏幕变得足够小时,绝对位置与图像重叠。我已经添加了一个div,它只占用了包装中的空间,我避免了重叠,但是现在,当您将屏幕缩小时,div会在图像下方移动,但它不会重新定位到下方;它向右移动。这里是一个的jsfiddle例如:Divs重叠:如何推动一个与位置:绝对下另一个时,他们重叠
下面是HTML:
<div class='ideaside'>
<div class='ideaphoto'>
<img src='http://www.devsourcecodex.com/images/advertisingexamples/200x200.png'></img>
</div>
<div style="float:left; width:150px; height: 120px;"> </div>
<div class='ideainfo'>
<p clas='glyphicon glyphicon-star unclickable'></p>
<span>Followers</span></p>
<p><strong>
Phase 1
</strong></p>
<p>By <%= render @idea.user %></p>
<i>2 hours ago </i>
</div>
</div>
<br>
<p class='doc'>
<b>Brief:</b>
t's not fallacious at all because HTML was designed intentionally. Misuse of an element might not be completely out of question (after all, new idioms have developed in other languages, as well) but possible negative implications have to be counterbalanced. Additionally, even if there were no arguments against misusing the <table> element today, there might be tomorrow because of the way browser vendors apply special treatment to the element. After all, they know that “<table> elements are for tabular data only” and might use this fact to improve the rendering engine, in the process subtly changing how <table>s behave, and thus breaking cases where it was previously misused.
</p>
这里是CSS:
.ideaphoto {
float:left;
}
.ideainfo {
position:absolute;
bottom:0;
right:0;
}
.ideaside {
position:relative;
overflow:hidden;
}
我想它去重新定位,以便它直接在图像下面,而不是在图像下面的一些空白旁边。这可能不使用Jquery碰撞检测?
谢谢。
编辑:我正在使用Bootstrap,这一切都发生在col-md-4。图片始终为200px,但文本div的宽度根据用户的名称而有所不同。
有很多方法可以做到这一点。你能说一些关于'.ideainfo'的东西,它是否可以有一个最小宽度的例子?我们需要知道布局何时从一行上的图像文本转到图像下面的图像和文本块的垂直布局。请扩大您的描述,谢谢! – 2014-10-18 14:09:44