如何在列中垂直放置 div 列表？

Question

所以我不知道如何准确地表达这个问题，这可能是我一直很难找到搜索结果的原因。但我认为一张图片值一千字所以...

基本上，我希望有多个高度可变的 div 列（所有内容都是动态创建的，因此没有硬编码位置），其中每个 div 根据其列中上方的 div 垂直对齐，而不是相对于旁边的 div。

编辑：

另外，我需要根据屏幕大小调整列数。因此，任何时候都可能有一、二、三或四列，但总 div 的数量相同。

Answer 1

详细说明 Sterling Archer 的评论。你应该为它们设置样式

float:left;

为了让它们均匀地分开。我会使用百分比来设置它们的宽度

width:33%;

如果您需要我很乐意提供的示例，但我已经看到这个问题有几个示例。

Answer 2

您可以使用flex 并将width 设置为大约30%：

.board {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-content: space-between;
}

.col {
 width: 30%;
 margin: 0 auto;
}

.cell  {
  height: 50px;
  width: 100%;
  background-color: black;
  margin-bottom: 10px;
}

<div class="board">
  <div class="col">
    <div class="cell"></div>
    <div class="cell" style="height: 100px"></div>
    <div class="cell"></div>
  </div>
  <div class="col">
    <div class="cell" style="height: 100px"></div>
    <div class="cell"></div>
    <div class="cell" style="height: 100px"></div>
  </div>
  <div class="col">
    <div class="cell" style="height: 120px"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

Answer 3

如果您能够添加外部库，则可以使用Bootstrap，它允许您设置根据屏幕分辨率调整的网格系统。即，在更高的分辨率下，您可以拥有更多的列，而在较低的分辨率下拥有更少的列。

Answer 4

您可以使用masonry js 快速解决问题。这是砌体的样本 LiveOnFiddle

$( function() {

    $('#container').masonry({
        itemSelector: '.item',
    
    });

});

#container {
  border:1px dotted black;
    padding: .3em;
}

.item {
    width: 60px;
    height: 60px;
 
    margin: 5px;
    background: red;
     
}

.item.w2 {
    width: 130px;
      background: blue; 
}

.item.h2 {
    height: 130px;  background:green;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
<div id="container">
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2 h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
</div>

  

Answer 5

这种布局称为砌体。我使用这个 JQuery 插件来实现这个布局：http://masonry.desandro.com/

Answer 6

我添加了flex 解决方案。这是fiddle，我还在下面包含了它的 HTML 和 CSS。让我知道它是否是您正在寻找的东西！

.column-wrapper {
  display: flex;
  flex-direction: row;
}
.column-1, .column-2, .column-3 {
  display: inline-flex;
  flex-direction: column;
  padding: 10px;
  width: 100%;
} 
.box {
  background-color: red;
  height: auto;
  min-height: 100px;
  margin: 10px;
  width: 100%;
}
.box p {
  font-size: 40px;
}

<div class="column-wrapper">
  <div class="column-1">
    <div class="box">
      <p>hello and good luck!</p>
    </div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="column-2">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="column-3">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>