我有一个 div 列表,其高度可变,需要彼此相邻 float 。问题是评论 4 应该放在评论 2 之上。但是当然不能这样做,因为评论 3 正在取代它。
在不过多更改标记的情况下,这在 css 中是否可行?评论是动态添加的,所以它并不总是 5 条评论。我制作了一个显示问题的 jsfiddle http://jsfiddle.net/Kv2Qf/ - 我目前拥有的是:
<div id="CommentsContainer">
<div class="Comment">
<div class="CommentContent" style="height: 250px;">
Comment 1
</div>
</div>
<div class="Comment">
<div class="CommentContent" style="height: 100px;">
Comment 2
</div>
</div>
<div class="Comment">
<div class="CommentContent" style="height: 200px;">
Comment 3
</div>
</div>
<div class="Comment">
<div class="CommentContent" style="height: 250px;">
Comment 4
</div>
</div>
</div>
随着样式:
#CommentsContainer
{
width: 783px;
height: 500px;
background-color: #f2f2f2;
}
.Comment
{
width: 229px;
float: left;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
margin-bottom: 10px;
margin-right: 10px;
border: 1px solid #aaaaaa;
background-color: #fffec7;
}
结果:
预期结果:
最佳答案
你可以尝试给第四个盒子一个负的margin-top:
<div class="Comment" style="margin-top:-90px;">
<div class="CommentContent" style="height: 250px;">
Comment 4
</div>
</div>
在 IE 和 Firefox 中工作,从未在其他浏览器中测试过。
关于css - 可变高度的 float div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21913369/