html - 使用 CSS 定位 Div(在另一个 div 下方 float div)

Question

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

现在，我的问题是行中的 div 可以是任意高度并且不统一。如果我行中的某个特定 div 比其余部分高，它会在较短的 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 支持-