如何漂浮不同高度的元素？

我正在致力於一個響應式網頁設計，並列4列浮動多個項目。這些項目有不同的高度，因此浮動不正常工作。如何漂浮不同高度的元素？

這是目前發生的事情：

floating wrong http://f.cl.ly/items/05233z0M0H0x1t1K331B/floating-wrong.png

如何使元素任何想法漂浮這樣的：

floating right http://f.cl.ly/items/300e1s0o0p1r1P3k2U3z/floating-right.png

我想這應該用jQuery工作「砌體「，對吧？然而，我正在與Zepto.js合作，我猜jQuery插件是行不通的。

有沒有任何純粹的CSS（CSS3）的方式呢？還有一些技巧呢？

如果不會用純CSS或JS的工作是有可能做到這一點：

floating different http://f.cl.ly/items/0p3O1k0d332c242c0G0F/floating-different.png

現在，第二行的元素5,6和7是不是「真的」浮你會期待它的方式，但裏面有一個隱藏的換行符（clearfix）。

是否有任何方式與純CSS？例如。使用nth-child(4n+4)和像:after這樣的僞選擇器可以使用content應用換行符？

有關於此的任何想法？任何聰明的技巧，使這項工作？

來源

2012-08-04 matt

要做到不clearfixing第二個刪除不必要的，只是把1,2,3,4在一個容器中， 5,6,7,8在一個容器中 – Andy 2012-08-04 20:41:35

一些jquery插件可以與Zepto一起工作。我不能說砌體，但你可以在解僱之前嘗試。 – Spudley 2012-08-04 20:46:33

現在，一些JS磚石的替代品已經出現：https：//github.com/attila/savvior和https://github.com/rnmp/salvattore – 2015-10-21 20:26:36

你可以對每五個元素應用一個清除，強制它在左邊開始。我認爲這將是這個樣子的CSS3：

div#wrapper > *:nth-child(4n+1) { 
    clear: both; 
}

jsFiddle demo

來源

2012-08-04 20:53:04 Pevara

美麗的答案。我知道使用'clear：both'，但不知道你可以指定一個重複的索引公式來選擇CSS3中的'nth-child'。我希望你不介意@PeterVR，但我添加了一個小演示jsFiddle。 – Richard 2012-08-04 21:57:05

這真是極好的解決方案 – Jim 2013-11-07 02:55:06

如果你真的在做一個響應式設計，那麼一行中的元素數量可能並不總是4.在這種情況下，@我的頭痛的答案會更適合。 – 2014-08-12 14:50:14

第二個選項，而instad「浮動：左」使用「display：inline-block的」，你甚至可以結合起來，與文本對齊：中心總是充滿100％，除第一個選項的最後一行

你可以把1和5 ONW容器，2和6個接口，依此一個，那麼你浮這些容器

來源

2012-08-04 21:46:18 arieljuod

爲最後一個，你可以圍繞每個四組的w ith一個容器。然後將div放入容器中，如果你不想或者不能手動完成這些工作，你可以用JavaScript輕鬆完成。

來源

2012-08-04 22:04:24 Jack

正如@Arieljuod所述，您可以使用display: inline-block而不是float。這樣做的好處是，它會在所有瀏覽器（包括下面的黑客IE7 +）工作，是完全流體：

div { 
    ... 
    display: inline-block; 
    vertical-align: top; 
    margin-bottom: 0.3em; 
    *display: inline; 
    *margin-right: 0.3em; 
    *zoom: 1; 
    ... 
}

工作例如：http://jsfiddle.net/cRKpD/1/

來源

2012-08-04 22:04:26

當瀏覽器較窄時，添加底部邊距有助於防止兩個框之間相互重疊，而兩者之間沒有間距。更新演示：http://jsfiddle.net/gnNTZ/ – 2012-08-04 22:36:56

@MattCoughlin良好的通話 - 我沒有考慮到這一點！我已經相應地更新了我的答案 – 2012-08-04 22:45:21

對於IE7破解版 – 2012-08-04 22:58:43

第一選項

CSS multi-column layout，一旦它得到充分的標準化和支持，可以提供一個靈活的方式來做到這一點。

想到的唯一其他CSS解決方案雖然可能沒有足夠的響應能力，但是將列元素分組在列容器中（1和5，然後是2和6，然後是3和7，然後是4）。

除了這兩個選項，我相信JS是必需的。

來源

2012-08-04 22:51:20

有點晚了，但把1放在一個額外的分頻器。然後把7放在分頻器中（你必須調整分頻器，使得7出現在1以下）。在這個分隔符中可以使用overflow：可見。

來源

2014-10-08 08:04:12 BK14

我知道我遲到了，但有人只是掛這個問題到另一個類似的一個，我意識到這其中忽略了Flexbox的解決方案...
（這是不是當週圍有人問這個問題）。

添加所需的供應商前綴和你的CSS

.parent { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: -moz-box; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
     -ms-flex-wrap: wrap; 
      flex-wrap: wrap; 
    -webkit-flex-flow: row wrap; 
     -ms-flex-flow: row wrap; 
      flex-flow: row wrap; 
}

example

來源

2016-02-21 03:07:04

如何漂浮不同高度的元素？

回答

相關問題