column的浏览器兼容问题，不同内核要写其前缀
column-width 和column-count没有必要同时出现
column-rule设置列与列之间的边框
-webkit Google浏览器内核
-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可以设置每一列的宽度，并根据窗口宽度除以每一列宽度得到的列数进行纵向排列div模块，实现瀑布流布局
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>
网友评论