Question

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

我使用php脚本动态创建div框。当一个最右边的div框表示B的高度比最左边的div框大A在同一行说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>

然后第1,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。

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

1 个答案: