My CodePen：http://codepen.io/leongaban/pen/wzumq如何讓div列浮動得更緊？
嗨，所以今天我有一個6列布局（每行3列）。第三欄非常長，幾乎就像一個側欄。
根據設計第4列和第5列需要靠近列1和列2的底部（可以說是10px填充）。
問題是，因爲我所擁有的一切目前向左浮動，長列3列創建1 & 2的底部和柱的頂部之間空間太大4 & 5.
我想保留div的位置是因爲在較小的瀏覽器窗口中我會有一些自適應代碼來重新設置它們。
有沒有簡單的方法來做到這一點？或者我是否必須將第4列放置在1之下的另一列中，第5列和第2列中的第4列是相同的？那麼，當屏幕尺寸改變使用jQuery重新定位div？
當前問題： 
我試圖去： 
我看這樣做是包裝COL1-COL4的唯一途徑，COL2-COL5，COL3，COL6並讓包裝紙向左浮動。
那麼如果你想根據屏幕的分辨率使它響應，你可以使用@media queries和respond.js。
這裏是你應該做一個簡要說明：
HTML
<div class="wrapper1">
<div class="col1">content here</div>
<div class="col4">content here</div>
</div>
<div class="wrapper2">
<div class="col2">content here</div>
<div class="col5">content here</div>
</div>
<div class="wrapper3">
<div class="col3">content here</div>
<div class="col6">content here</div>
</div>
CSS
.wrapper1, .wrapper2, .wrapper3{float:left;}
在這裏你可以找到your codepen updated
在這裏你可以瞭解更多關於respond.js and css media queries
你有幾個選項，this article解釋得很好。
這就像你想要的砌體佈局一樣。
哇謝謝s的鏈接！今晚做一些重讀... – 2013-04-10 22:50:24
你會看到，這很簡單:)關閉左邊的標籤，你會看到代碼:) – jhon 2013-04-10 23:57:39
謝謝！這確實有效，所以似乎我需要使用jQuery來重新定位更小的瀏覽器窗口大小的div。 – 2013-04-10 22:50:05
是的，正如我所說的respond.js可以使css媒體查詢crossbrowser。 媒體查詢用於在不同的屏幕分辨率上添加不同的樣式。 – Yenn 2013-04-10 22:54:07
看看我的解決方案，使用css3和媒體查詢任何窗口調整大小:) – jhon 2013-04-10 22:57:32