使用CSS定位Div（Float div低于另一个div）

Question

我正在尝试创建多个div并将它们放在几行和多列上。我使用float（对于同一行中的列）和clear来定位它们以创建新行。一切正常，请参阅JSFiddle

现在，我的问题是我的行中的div可以是任意高度而不是统一的。如果我的行中的特定div高于其余的div，则会创建下一行，其中blank space低于较短的div。无论如何我可以避开空间并将div放在上一行div的下方？

下面是我所得到的以及期望的图示：

当前布局：

预期布局：

Answer 1

您应该使用列而不是行。

<div id="customtable">
    <div id="row1">
        <div id="col1" style="width:64px; float:left;">
           <div id="row1col1" style="float:left; border:1px solid; width: 30px; height:30px">1A</div>
           <div id="row1col2" style="float:left; border:1px solid; width: 30px; height:30px">1B</div>
          <div id="row2col1" style="float:left; border:1px solid; width: 30px; height:30px">2A</div>
         <div id="row2col2" style="float:left; border:1px solid; width: 30px; height:30px">2B</div>
      </div>
    <div id="col2" style="width:40px; float:left;">
        <div id="row1col3" style="float:left; border:1px solid; width: 40px; height:40px">1C</div>   
        <div id="row2col3" style="float:left; border:1px solid; width: 40px; height:40px">2C</div>
    </div>
</div>

jsfiddle

另一方面，您可以使用flexgrid基于css flex。但IE9不支持它 -

Answer 2

您最好的选择是使用像masonryjs这样的javascript插件。砌体所做的是为您准备内容，您所做的就是指定宽度。优点包括流体和响应部位。

var container = document.querySelector('#customtable');
var msnry = new Masonry( container, {
  columnWidth: 30,
  itemSelector: '.box'
});

这是codepen，其布局类似于您要实现的布局。

Answer 3

CSS的方法是单独制作1A，1B，2A，2B display: inline-block。并使更大的浮动。

在这里工作FIDDLE。

并添加一些边距以撤消默认的内联块边距，并为其父div提供一些width和height。

希望它有所帮助！