CSS：如何完美地排列所有float：left元素，沒有間隙？

好吧，我不知道這一個了...我已經得到了這些元素向左浮動與此：CSS：如何完美地排列所有float：left元素，沒有間隙？

.event { 
    display: block; 
    float: left; 
    width: 25%; 
}

的瀏覽器調整大小以調整畫面大小是動態生成的寬度，所以我無法控制每行顯示這些元素的數量，而且我無法添加清除：由於這一點（它全部是動態生成的），因此在任何地方都會打破div/lines。

Here is a screenshot of the problem

或調整時，另一個版本：

Another screenshot

現在，我都試過overflow:hidden方針，clear:both（我真的不能使用），event::after方法，我無法弄清楚如何設置這些排列沒有差距。如果我在它們上面設置的高度很好，但高度也會動態變化，因此我無法插入設置的高度。

還有其他想法嗎？

來源

2015-04-23 Crazy Serb

爲什麼使用浮動：爲什麼不顯示：inline-block的？ – jbutler483

你應該看看使用柔性盒，它會做你正在試圖用浮動在這裏實現，而不需要知道每行顯示多少元素。 – Shaggy

隨着高度變化，你的選擇將受到限制。演示在這裏會非常有用。如果可以使用jQuery，我會推薦[masonry plugin]（http://masonry.desandro.com/）。或者，有人創建了[CSS3中的砌體]（http://sickdesigner.com/masonry-css-getting-awesome-with-css3/），但我不知道該功能是否相同，或者您可能想要查看CSS列，如果您對[瀏覽器支持]（http：// caniuse）的當前級別感到滿意。com /＃search = column） – andyb

根據您當前的視口大小（或父大小），你需要一個clear:left適用於每一個3n + 1或4n + 1.event元素（你可以申請一個規則或者使用mediaquery另一個）

.event:nth-child(3n + 1) { 
    clear:left; 
}

或

.event:nth-child(4n + 1) { 
    clear:left; 
}

注意。當指定float，該display屬性是完全無用的（除非您使用IE6和你戰鬥反對「double margin bug」）

來源

2015-04-23 12:57:21 fcalderan

試過了，沒有任何效果。 –

嘗試設置一個固定的高度，然後也許溢出：滾動;或隱藏：

.event { 
    display: block; 
    float: left; 
    width: 25%; 
    height: 200px; 
    max-height: 200px; 
    overflow: auto; 
}

這裏是原始小提琴示範：

http://jsfiddle.net/ry9qgz3o/

您應該建立容器用白色填充也許有25％的寬度，使你的.event元素不明白太靠近並且在一起。

來源

2015-04-23 12:57:33 taxicala

我不得不使用CSS中的媒體查詢來設置特定斷點的高度......唯一的辦法就是解決這個問題，我想，因爲所有其他建議都沒有解決。 –

-1

在CSS中，從所有方面給填充0像素要刪除差距

.event { 
display: block; 
float: left; 
padding:0; 
// if you want 5px padding left-right then give property 
// padding:0 5px; 

width: 25%; 
}

來源

2015-04-23 13:02:10

CSS：如何完美地排列所有float：left元素，沒有間隙？

回答

相關問題