Question

我有一些不同高度的内容盒，它们会浮动。不幸的是，它们之间浪费了很多空间。以下示例为例（https://jsfiddle.net/mzqb7mzm/，如果你想看到它现场演奏）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
    <style type="text/css">
        body {
            width: 320px;
        }
        div {
            margin: 2px;
            width: 100px;
            border: 1px solid #aaa;
        }

        .box {
            float: left;
        }
    </style>
</head>
<body>
    <div class="box" style="height:  50px; ">1. box</div>
    <div class="box" style="height: 300px; ">2. box</div>
    <div class="box" style="height: 150px; ">3. box</div>
    <div class="box" style="height: 200px; ">4. box</div>
    <div class="box" style="height: 150px; ">5. box</div>
    <div class="box" style="height: 100px; ">6. box</div>
</body>
</html>

我如何确保例如框4或5（或任何其他）填充框1下面的空格而不是产生这个大的空白？已经看过像Thumblr这样的解决方案，但他们正在使用Javascript。我对纯CSS（完美的CSS2）解决方案感兴趣。这甚至可能吗？

Answer 1

我很遗憾地说，但从技术上说，在CSS中这样做是不可能的。我也有这个问题，找不到解决方案（更改显示不起作用，额外的div不会，等等。）

如果有人仍然知道解决方案，我会很高兴听到它。

Answer 2

如果您可以更改HTML标记，只需将.box放在以下列中：

<div class="col">
  <div class="box" style="height:  50px; ">1. box</div>
  <div class="box" style="height: 150px; ">5. box</div>
</div>
<div class="col">
  <div class="box" style="height: 300px; ">2. box</div>
  <div class="box" style="height: 100px; ">6. box</div>
</div>
<div class="col">
  <div class="box" style="height: 150px; ">3. box</div>
  <div class="box" style="height: 200px; ">4. box</div>
</div>

然后向左浮动列：

.col {
  float: left;
}

这样，你的渲染现在看起来像：

＆＃13;

body {
  width: 320px;
}

.box {
  margin: 2px;
  width: 100px;
  border: 1px solid #aaa;
  text-align: center;
}

.col {
  float: left;
}

＆＃13;

<div class="col">
  <div class="box" style="height:  50px; ">1. box</div>
  <div class="box" style="height: 150px; ">5. box</div>
</div>
<div class="col">
  <div class="box" style="height: 300px; ">2. box</div>
  <div class="box" style="height: 100px; ">6. box</div>
</div>
<div class="col">
  <div class="box" style="height: 150px; ">3. box</div>
  <div class="box" style="height: 200px; ">4. box</div>
</div>

＆＃13;

通过CSS将内容框分配/浮动到高度相同的列

2 个答案: