从2到更多列的可变高度，固定宽度div的从上到下，从左到右堆叠

Question

我想在固定宽度和变量高度中布置变高度但固定宽度 div em>容器，这样子div就会以砖石形式堆叠在一起，占据2列或更多列。

这就是我想要的：

这就是我用浮动或FlexBox得到的东西：

以下是代码笔：http://codepen.io/anon/pen/xOLwVJ

<div class="container">
  <div class="item">
  </div>
  <div class="item" style="height:250px;">
  </div>
  <div class="item" style="height:150px;">
  </div>
  <div class="item" style="height:200px;">
  </div>
  <div class="item" style="height:180px;">
  </div>
</div>

此代码仅参考CodePen，并不代表此处的2张图像。

Flexbox和Floats似乎都不起作用。我最接近使用的是使用列，但是他们在中间剪切了子div - 它可以用于文本，但对于实际的盒子则不然。

我想要没有JavaScript的HTML / CSS解决方案。

Answer 1

毕竟可以使用CSS列。诀窍是在子元素上设置display:inline-block以防止在列包装中间切割子div。

<div class="container">
  <div class="item">
  </div>
  <div class="item" style="height:250px;">
  </div>
  <div class="item" style="height:150px;">
  </div>
  <div class="item" style="height:200px;">
  </div>
  <div class="item" style="height:180px;">
  </div>
</div>

CSS：

.container {
  margin: 0 auto;
  width:600px;
  background:#ddd;
  display: block;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}
  .item {
    margin:10px;
    background:red;
    width:270px;
    height:100px;
    display:inline-block; /* this is to prevent div being cut in the middle when it flows onto the next column */
  }

Codepen：http://codepen.io/anon/pen/GqvoBO

Answer 2

这是你的问题的jsfiddle我希望这对你有用（https://jsfiddle.net/ahe128/anhw21rj/）

<div id="main">
<div id="coloumn1">
  <div id="row1_1">
  </div>
   <div id="row1_2">
  </div>
    <div id="row1_3">
  </div>
</div>
<div id=coloumn2>
 <div id="row2_1">
  </div>
   <div id="row2_2">
  </div>
</div>
</div>

#main{
  height:500px;
  width:500px;
  border:1px solid black;
  margin:10px;
}
#coloumn1{
  height:400px;
  width:200px;
  float:left;
margin:10px;
   border:2px solid black;
}
#row1_1{
  height:150px;
  width:150px;
   border:1px solid black;
   margin:10px;
}
#row1_2{
  height:100px;
  width:150px;
margin:10px;
 border:1px solid black;
}
#row1_3{
  height:50px;
  width:150px;
margin:10px;
 border:1px solid black;
}
#coloumn2{
  height:400px;
  width:200px;
  float:left;
   border:2px solid black;
   margin:10px;
}
#row2_1{
  height:200px;
  width:150px;
   border:1px solid black;
   margin:10px;
}
#row2_2{
  height:150px;
  width:150px;
margin:10px;
 border:1px solid black;
}