Question

所以我不确切地知道如何说出这个问题，这可能就是为什么我一直很难找到搜索结果的原因。但我认为一张图片胜过千言万语......

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

编辑：

另外，我需要根据屏幕大小调整列数。所以在任何一点都可以有一列，两列，三列或四列，但总的div数相同。

Answer 1

详细说明Sterling Archer的评论。你应该设置所有这些样式

float:left;

以使它们均匀分开。我会使用百分比来设置宽度

width:33%;

如果你需要一个例子，我很高兴提供，但我已经看到了这个问题，有几个例子。

Answer 2

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

Answer 3

您可以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 4

我添加了flex解决方案。这是fiddle我还在下面包含了HTML和CSS。如果您正在寻找它，请告诉我们！

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 5

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

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 6

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

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

6 个答案: