如何在页面中放置HTMLdiv，以便页面上不留任何空间

我正在创建一个html页面，其中正文由多个div框组成。每个框都有下面给出的样式，宽度是固定的，400px是我屏幕的1/3，但高度不是固定的。所以我的屏幕可以水平放置三个这样的盒子。我还使用了float:left，因此如果有一些空间，框总是填充右侧的空间。但它仍然不能满足我的要求

我正在使用php脚本动态创建div框。当同一行中最右边的一个div-box（比如B）的高度大于最左边的div-box（比如a）的高度时，下一个div-box（比如C）会进入a的底部，而a的顶部会低于B的底部，所以a和C之间会留下一个巨大的空间。那么如何移除这个空间呢

我应该使用什么样的css，以便所有div都相应地放置它们，这样页面上就没有空间了

.respost {
    margin-left: 10px;;
    width: 400px;
    float: left;
    border-bottom: solid blue;
    border-top: solid blue;
    border-left: solid blue;
    border-right: solid blue;
    margin-top: 30px;
    word-wrap: break-word;
}

---

目前，有几种方法可以做到这一点。首先，可以在HTML中使用单独的列。这可能会很尴尬，因为您只想附加div，就像使用for循环一样

在该场景中，html中有三列，如下所示：

<div class="column_wrapper">
  <div class="column column1">
    ...
  </div>
  <div class="column column2">
    ...
  </div>
  <div class="column column3">
    ...
  </div>
</div>

在PHP中，您可以将repost附加到其中一列：

$count = 0;
$columns = array(0=> [], 1=> [], 2=> []);
foreach ($items as $item) {
    $columns[$count++ % 3][] = $item;
}

---

如果您不介意将jQuery添加到页面中，更好的选择是使用。

试试这个css-tricks.com/无缝响应-photo-gridThank，它真的做到了。上面的代码比不使用表做得更糟。尽管砌体类型代码有效。

$count = 0;
$columns = array(0=> [], 1=> [], 2=> []);
foreach ($items as $item) {
    $columns[$count++ % 3][] = $item;
}