Div浮动问题

Question

http://jsbin.com/aruvo4/5

如何让第3个div立即进入第一个div？

Answer 1

您可以为float:right;

添加#wrapper .long

示例：http://jsbin.com/aruvo4/4

另外，为overflow:auto添加#wrapper以清除浮动广告。 http://www.quirksmode.org/css/clearing.html

Answer 2

以下是适合您的CSS3解决方案：

#wrapper { width: 200px; overflow: auto; }
#wrapper div { float: left; background: pink; min-height: 80px; width: 80px; margin: 5px; padding: 4px; }
#wrapper div:nth-child(2) { float: right; }

但是，对于跨浏览器的解决方案，您需要在我已经浮动的div中添加一个类

：nth-​​child浏览器支持

IE8   FF3.5+  SA3.1+  OP9.5+  CH2+
None  Full    Full    Full    Full

- 编辑 -

在这里阅读更多评论，看到你不能使用伪类。我会在这里保留答案，因为它会在其他情况下起作用。

Answer 3

按照表格的方式进行整理（即在“行”周围放置div标签），并根据需要将div的显示属性设置为table-row和table-cell。长单元格需要顶部和底部= 0，位置设置为绝对。还需要一个空白单元格保持长的位置，使其伸展。

这是一个完整的explanation。

Answer 4

<div class="small_divs">
</div>
<div class="small_divs">
</div>
<div class="small_divs">
</div>
<div id="big_div>
</div>

#big_div { float:right;}