使用 CSS 定位 Div（在另一个 div 下方浮动 div）

Question

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

现在，我的问题是我行中的 div 可以是任意高度而不是统一的。如果我行中的特定 div 比其他行高，它会在较短的 div 下方创建下一行 blank space。无论如何我可以避免 space 并将 div 定位在前一行的 div 下方吗？

下面是我得到的和期望值的图示：

当前布局：

预期布局：

Answer 1

您最好的选择是使用 javascript 插件，例如 masonryjs。 masonry 所做的就是为你对齐内容，你所做的就是指定宽度。优点包括流畅且反应灵敏的网站。

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

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

Answer 2

您应该使用列而不是行。

<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

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

Answer 3

CSS 方法是将 1A、1B、2A、2B display: inline-block 放入 div 中。并使较大的浮动。

在这里FIDDLE工作。

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

希望对您有所帮助！

使用 CSS 定位 Div（在另一个 div 下方浮动 div）

Positioning Divs using CSS (Float div below another div)

html

css