鍍金池/ 問(wèn)答/HTML5  HTML/ css怎么實(shí)現(xiàn)這種布局？

css怎么實(shí)現(xiàn)這種布局？

圖片描述

里面每個(gè)方塊的寬度一樣，高度由自身?yè)伍_(kāi)，下面的方塊自動(dòng)往上面擠

回答
編輯回答
澐染

<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>
2017年1月30日 10:45
編輯回答
陌如玉

c3實(shí)現(xiàn)瀑布流：

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

使用以上代碼就可以實(shí)現(xiàn)，但是實(shí)際存在兼容性，建議使用插件

2017年3月20日 19:11
編輯回答
小曖昧

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

2018年1月30日 23:00
編輯回答
澐染

使用flex布局試試

2018年9月11日 00:05
編輯回答
巷尾

分欄布局

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

2017年9月20日 18:35
編輯回答
氕氘氚

瀑布流 可以實(shí)現(xiàn)這個(gè)

2017年2月2日 07:39
編輯回答
愛(ài)是癌

瀑布流可以實(shí)現(xiàn)

2017年11月17日 16:32
編輯回答
初念

瀑布流布局：
課程傳送門
實(shí)例傳送門

2018年8月16日 16:15
編輯回答
安若晴

用flex流式布局試試

2018年9月6日 11:48
編輯回答
任她鬧

用兩個(gè)并排定寬的容器放置圖片，不用設(shè)置高度。然后放置圖片，圖片只設(shè)置寬度和父容器同寬就可以，高度會(huì)自己按比例撐開(kāi)，然后給圖片邊線和下邊距就可以了。如果是請(qǐng)求來(lái)的圖片，就需要判斷輪流給兩個(gè)圖片容器append圖片了。

2017年12月17日 22:05