Div浮動問題

Question

http://jsbin.com/aruvo4/5

我該如何讓第三個div立即進入第一個div？

Answer 1

可以爲#wrapper .long

例如添加float:right;：http://jsbin.com/aruvo4/4

此外，添加overflow:auto爲您#wrapper清除浮動。 http://www.quirksmode.org/css/clearing.html

Answer 2

整理它，你將一個表（即，圍繞你的「行」的地方div標籤），並設置div的顯示屬性table-row和table-cell適當。長單元格需要頂部和底部= 0並且位置設置爲絕對。還需要有一個空白單元格，以保持長的位置，以允許它向下延伸。

這是一個完整的explanation。

Answer 3

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

#big_div { float:right;} 

Answer 4

這裏是爲您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右

：第n個孩子瀏覽器支持

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

- 編輯 -

只要在這裏閱讀更多評論，並看到你不能使用僞類。我會在這裏保留答案，因爲它可以在其他情況下使用。