Question

我想创建一个div框'网格'可以这么说。

目前我的div框未正确对齐。不同高度的Div盒在一些div之间产生大的垂直空间。 div盒子也越来越向右侧。

我希望div盒彼此保持相同的边距，无论盒子的高度如何，并且它们从左边排列＆gt;右。

我希望div框对齐这样的东西：

以下是正在发生的事情的示例：http://jsfiddle.net/P4S8z/

HTML：

<div class="container">

  <div class="box" style="height:225px;">
    <h3>Blah blah</h3>
  </div>

  <div class="box" style="height:160px;">
    <h3>Blah blah</h3>
  </div>

  <div class="box" style="height:200px;">
    <h3>Blah blah</h3>
  </div>

  <div class="box" style="height:180px;">
    <h3>Blah blah</h3>
  </div>

  <div class="box" style="height:150px;">
    <h3>Blah blah</h3>
  </div>

  <div class="box" style="height:170px;">
    <h3>Blah blah</h3>
  </div>

</div>

CSS：

.container {
position: relative;
float: left;
margin: 0;
}

.box {
position: relative;
display: block;
float: left;
width: 250px;
margin-left: 1.5em;
margin-bottom: 0.5em ;
padding: 0 10px 0;
color: #666;
background: #fff;
border: 1px solid #d2d2d2;
border-radius: 3px;
}

.box h3 {
position: relative;
display: block;
height: 20px;
line-height: 1.3em;
width: 260px;
margin: 0;
padding: 5px 10px;
left: -15px;
top: 8px;
color: #cfcfcf;
text-shadow: 0 1px 1px #111;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #333;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

Answer 1

我能想到使用纯CSS的最简单方法是指定列。

我用div包围了每个“列”，然后将那些div放到了左边。

这是一个更新的小提琴：http://jsfiddle.net/Renson/P4S8z/4/

这应该保持边距相等，就像你想要的那样

新HTML

<div class="container">
<div class="subcontainer">
    <div class="box" style="height:225px;">
        <h3>Blah blah</h3>
    </div>
    <div class="box" style="height:180px;">
        <h3>Blah blah</h3>
    </div>
</div>
<div class="subcontainer">
    <div class="box" style="height:160px;">
        <h3>Blah blah</h3>
    </div>
    <div class="box" style="height:200px;">
        <h3>Blah blah</h3>
    </div>
    <div class="box" style="height:150px;">
    <h3>Blah blah</h3>
    </div>
    <div class="box" style="height:170px;">
    <h3>Blah blah</h3>
    </div>
</div>

添加到CSS

.subcontainer{
    float: left;
}

Answer 2

这实际上可以用纯CSS：

.container {
    column-count: 3;
}

至少在现代浏览器中：https://caniuse.com/#search=column-count

Answer 3

您可以使用以下内容:(假设有6个网格列） #subcontainer＆gt; div { 向左飘浮; 显示：内联; 保证金：0 20px 0 0; } #subcontainer＆gt; div：nth-of-type（6n + 6）{ margin-right：0; }

    #ids or .classes with height and width {
    ...
    }

通过这种方式，你总是将#subcontainer的第6个孩子作为右边界的类或ID独立，但是中心div总是具有相同的边距

如何无缝对齐不同大小的块div？

3 个答案: