css怎么实现这种布局？

Question

里面每个方块的宽度一样，高度由自身撑开，下面的方块自动往上面挤

Answer 1

这应该是瀑布流吧，纯CSS好像实现不了，我是用JS里数组按列分组，后逐一计算高度，绝对定位定上去的。

Answer 2

瀑布流布局：
课程传送门
实例传送门

Answer 3

css可以做，参考：http://blog.csdn.net/luviawu/...

Answer 4

用flex流式布局试试

Answer 5

分栏布局

flex float display:inline-block column:2 position:absolute
...

Answer 6

这种属于瀑布流式的布局。

Answer 7

使用flex布局试试

Answer 8

瀑布流 可以实现这个

Answer 9

瀑布流可以实现

Answer 10

用两个并排定宽的容器放置图片，不用设置高度。然后放置图片，图片只设置宽度和父容器同宽就可以，高度会自己按比例撑开，然后给图片边线和下边距就可以了。如果是请求来的图片，就需要判断轮流给两个图片容器append图片了。

Answer 11

用瀑布流布局可以实现

Answer 12

c3实现瀑布流：

-moz-column-count:4;  
-webkit-column-count:4;
 column-count:4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;

使用以上代码就可以实现，但是实际存在兼容性，建议使用插件

Answer 13

<style>
.container {

 display: flex;

}
.rightContainer{

 margin-left: 20px;

}
.box {

 height: 100px;
 width: 300px;
 border: 1px solid red;
 margin-bottom: 30px;

}
.box1 {

height: 200px;
 width: 300px;
 border: 1px solid red;
 margin-bottom: 30px;

}

</style>

<div class="container">
    <div class="leftContainer">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <div class="rightContainer">
      <div class="box1"></div>
      <div class="box"></div>
    </div>
  </div>