没有垂直空间的浮动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

回答

相关问题