将内容放入最短的列

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>