將浮動元素直接放在彼此的下方

我想在下一行中顯示一排拖拽div，下一個div直接位於最後一個下方。就像這樣：將浮動元素直接放在彼此的下方

enter image description here

由於佈局已建成的CMS，我不能把盒子1,3和2,4的分隔符格。有沒有一種方法來實現這種行爲沒有額外的包裝元素？（正常的浮動行爲不起作用，顯示內聯/內聯塊也沒有辦法。）或者需要一些JavaScript來構建這樣的佈局？

來源

2011-02-24 wowpatrick

由於高度不同，這看起來像我仍然沒有找到一個通用的純CSS技術來處理它的問題，儘管嘗試真的很難。

我已經張貼了這個答案之前，我已經放棄和使用jQuery插件要做到這一點，在過去類似的東西 css alignment question

：

jQuery Masonry

一張圖片勝過千言萬語：

來源

2011-02-24 15:30:03 thirtydot

+1好像沒有純粹的css解決方案 – Sotiris 2011-02-24 15:48:07

很棒！其實就是我一直在尋找的東西！可惜我沒有舊郵政，但感謝再次發佈它。 – wowpatrick 2011-02-24 16:13:37

您可以使用nth-child(odd)至clearfloat:left;。

CSS

.box {height:100px;width:100px;float:left;} 
.box:nth-child(odd) {clear:left;} 
.green {background:green;} 
.red{background:red;} 
.blue {background:blue;} 
.yellow {background:yellow;}

HTML

<div class="box green">BOX 1</div> 
<div class="box red">BOX 2</div> 
<div class="box blue">BOX 3</div> 
<div class="box yellow">BOX 4</div>

演示：http://jsfiddle.net/YSP2S/

請記住，這將不會爲Internet Explorer工作。您也可以使用conditional comment和javascript來實現與Internet Explorer相同的功能。

來源

2011-02-24 15:27:35 Sotiris

+1，工作正常，只要他的身高*不是*不同（就像他的照片一樣）。 – thirtydot 2011-02-24 15:33:09

@thirtydot你是對的。嗯，否則我不認爲存在任何純粹的CSS解決方案，只有這樣的JavaScript你建議。 – Sotiris 2011-02-24 15:47:43

問題是，盒子的高度不同，因爲它們是文本預覽，而文本總是不同的長度，所以看起來像我將不得不使用JavaScrip/jQuery作爲thirtydot建議......但仍然有幫助，謝謝！我還沒有看到jsfiddle.net，直到現在，分享代碼示例看起來很棒！ – wowpatrick 2011-02-24 16:04:51

將浮動元素直接放在彼此的下方

回答

相關問題