column的瀏覽器兼容問題，不同內(nèi)核要寫其前綴
column-width 和column-count沒有必要同時(shí)出現(xiàn)
column-rule設(shè)置列與列之間的邊框
-webkit Google瀏覽器內(nèi)核
-ms IE
-o opera
-moz 火狐FireFox
2019-05-15_105934.png
css
<style>
div{
display: inline-block;
padding: 0;
margin: 0;
}
#main {
-webkit-column-width: 202px;
-moz-column-width: 202px;
-o-column-width: 202px;
-ms-column-width: 202px;
}
.box {
padding: 10px 0 0 15px;
}
.pic {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
.pic img {
display: block;
width: 165px;
height: auto;
}
</style>
多欄布局column-width可以設(shè)置每一列的寬度，并根據(jù)窗口寬度除以每一列寬度得到的列數(shù)進(jìn)行縱向排列div模塊，實(shí)現(xiàn)瀑布流布局
html
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="./images/P_00.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_01.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_010.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_011.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_012.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_013.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_014.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_015.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_016.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_017.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_018.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_019.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_00.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_01.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_010.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_011.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_012.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_013.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_014.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_015.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_016.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_017.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_018.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./images/P_019.jpg" alt="">
</div>
</div>
</div>
</body>
