将内容放入最短的列

Question

我很确定我在这里很傻，但我有一个'仪表板'类型的布局，其中我有两列不同的高度。我有第三个项目，我想添加到最短的列（见附件）

在第一个示例中，第1列较短，因此我们在其下面添加第3项，但如果第2列较短则应该在那里。

我以为我应该使用花车，但它运行不正确。

有人可以赐教我！

Answer 1

我认为通过纯CSS解决方案是不可能的。首先，必须渲染DOM（渲染2个框及其内容），因此您具有每个框的确切高度。然后，您需要计算最短的（Javascript？），然后将第3个框附加到该列。

因此，从以上所有内容来看，我认为您需要结合使用JS和CSS

Answer 2

您可以左右浮动三个项目：

#wrapper {
  box-shadow: 0 0 0 1px #CCC;
}
/* clearfix */
#wrapper::after {
  content: "";
  display: block;
  clear: both;
}
.item {
  width: calc(50% - 1em);
  margin: .5em;
}
/* floats */
#item-1 {
  float: left;
  background-color: #080;
}
#item-2 {
  float: right;
  background-color: #F00;
}
#item-3 {
  float: left;
  background-color: #FF0;
}
/* demo */
textarea {
  box-sizing: border-box;
  margin: 1em;
  width: calc(100% - 2em);
  resize: vertical;
}

<p>Resize the boxes by dragging the resize handle of the textarea<br> The yellow box will position itself below the shorter of green and red box</p>
<div id="wrapper">
  <div class="item" id="item-1"><textarea rows="4">1</textarea></div>
  <div class="item" id="item-2"><textarea rows="9">2</textarea></div>
  <div class="item" id="item-3"><textarea rows="4">3</textarea></div>
</div>

Answer 3

这可能与您预期的不完全相同，但是通过使用flexbox列可以创建效果。如果您调整el1的高度，例如达到150，您将看到形状重新排列。这是我能想到的最好的纯CSS解决方案，但是如果您需要更多的灵活性，我会推荐Masonry插件，就像其他人所说的那样。

    #content {
        width: 400px;
        height: 200px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    
    .box {
        width: 200px;
        flex: none;
        box-sizing: border-box;
        color: white;
        text-align: center;
    }
    
    #el1 {
        height: 50px;
        background-color: green;
    }

    #el2 {
        height: 100px;
        background-color: red;
    }
    
    #el3 {
        height: 100px;
        background-color: yellow;
    }

<div id="content">
    <div class="box" id="el1">1</div>
    <div class="box" id="el2">2</div>
    <div class="box" id="el3">3</div>
</div>

Answer 4

当前，这仅适用于CSS，因为Web布局是逐行渲染的。

您可以使用Masonry之类的js插件，也可以编写自己的实现。