沒有垂直空間的浮動DIV

當浮動DIV的高度不同時，有沒有辦法修復垂直空間？沒有垂直空間的浮動DIV

例如：

<div class="container"> 
    <div class="floatingGrid"><img src="http://placehold.it/100x100&text=1" /></div> 
    <div class="floatingGrid"><img src="http://placehold.it/100x150&text=2" /></div> 
    <div class="floatingGrid"><img src="http://placehold.it/100x100&text=3" /></div> 
    <div class="floatingGrid"><img src="http://placehold.it/100x100&text=4" /></div> 
    <div class="floatingGrid"><img src="http://placehold.it/100x100&text=5" /></div> 
    <div class="floatingGrid"><img src="http://placehold.it/100x150&text=6" /></div> 
    <div class="floatingGrid"><img src="http://placehold.it/100x100&text=7" /></div> 
    <div class="floatingGrid"><img src="http://placehold.it/100x100&text=8" /></div> 
</div> 
<style> 
    .container { width: 312px; } 
    .floatingGrid { float: left; margin: 2px; } 
</style>

http://jsfiddle.net/ModuLIZER/gk1cjn1t/

在我的情況我不關心只是元件5和6的順序位置直屬1和2，而沒有空間。

我應該添加這個網格是響應，我需要支持IE9。

來源

2014-09-23 Morten Riis

使用CSS列：http://jsfiddle.net/gk1cjn1t/6/這裏有很多一篇關於這個話題的，像這樣的：http://stackoverflow.com/questions/13779512/css-system-alternative-to-masonry – 2014-09-23 10:46:00

足夠公平，雖然不是非常靈敏，但我想我可以通過一些媒體查詢休息來解決這個問題。 – 2014-09-23 10:56:04

Ahh沒有IE9支持，那是必須的。 [caniuse]（http://caniuse.com/#search=column-count） – 2014-09-23 10:58:04

我解決了一個類似的問題，創建浮動列和放入div，這將模擬我想你正在尋找的網格佈局。

<div class="container"> 
    <div class='column'> 
     <div class="floatingGrid"><img src="http://placehold.it/100x100&text=1" /></div> 
     <div class="floatingGrid"><img src="http://placehold.it/100x100&text=4" /></div> 
     <div class="floatingGrid"><img src="http://placehold.it/100x100&text=7" /></div> 
    </div> 
    <div class='column'> 
     <div class="floatingGrid"><img src="http://placehold.it/100x150&text=2" /></div> 
     <div class="floatingGrid"><img src="http://placehold.it/100x100&text=5" /></div> 
     <div class="floatingGrid"><img src="http://placehold.it/100x100&text=8" /></div> 
    </div> 
    <div class='column'> 
     <div class="floatingGrid"><img src="http://placehold.it/100x100&text=3" /></div> 
     <div class="floatingGrid"><img src="http://placehold.it/100x150&text=6" /></div> 
    </div> 
</div> 

<style> 
    .container { width: 312px; } 
    .column { width:104px; float:left; } 
    .floatingGrid { } 
</style>

或者，如果你不能創建列，還有一些JavaScript庫可以像例如http://masonry.desandro.com/。

來源

2014-09-23 10:50:01 Domenico

我的壞...我應該補充說它應該支持響應式設計，所以每隔三個元素添加一個div class ='column'不是一個選項，因爲網格也可以是兩列布局。 – 2014-09-23 11:07:14

嗯，如果沒有優雅的CSS解決方案我想一個js庫是要走的路... [同位素]（http://isotope.metafizzy.co/layout-modes.html），[磚石]（http： //masonry.desandro.com/）或[嵌套]（http://suprb.com/apps/nested/）看起來很有趣。 – 2014-09-23 11:28:00

-1

請勿使用float並使用inline-block您正在尋找的是砌體佈局。

看一看這個Fiddle

來源

2014-09-23 10:56:01 Awena

爲什麼downvote，你必須是盲人 – Awena 2014-09-23 11:04:02

不知道誰downvoted，但列數不是我的選擇，因爲我必須支持IE9 – 2014-09-23 11:24:19

如果我可能會問，你是什麼使用此列網格？如果它是例如展示畫廊縮略圖或投資組合，我可以推薦一個插件http://isotope.metafizzy.co/，我一直在使用它（IE8 +），這是除非你需要一個純粹的CSS解決方案並沒有過濾選項。祝你好運 – Awena 2014-09-23 11:28:01

沒有垂直空間的浮動DIV

回答

相關問題