如何将html div放在页面中，以便页面上没有空间

Question

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

我正在使用 php 脚本动态创建 div 框。当最右边的 div 框说 B 比最左边的 div 框说 A 在同一行中的高度大时，然后包含的下一个 div 说 C 进入 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;
}

Answer 1

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

在该场景中，您将在 html 中包含三列，如下所示：

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

那么column1、2、3的css可以是：

.column {
    width: 400px;
    float: left;
}

您可以在 PHP 中将转发附加到其中一列：

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

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