<body>
<div id="container">
<div class="col">
<div class="pic">
<img src="images/1.jpg">
<p>In sagittis sit amet lacus non luctus. In hac habitasse platea dictumst. Donec consequat felis odio,
non mollis ipsum dictum blandit.</p>
</div>
......
......
<div class="pic">
<img src="images/10.jpg">
<p>Aenean quis quam ac ex viverra pulvinar nec non lectus.</p>
</div>
</div>
</div>
</body>
瀑布流布局非常简单，我们先设置好整体的背景和外观：
body{
background:#95a5a6;
margin: 50px;
}
#container{
width: 960px;
margin: 0 auto;
}
之后，开始进行瀑布流的设置：
.col{
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 3; /* 设置总列数 */
column-gap: 15px; /* 列与列之间的像素 */
column-fill: auto; /* 按顺序对列进行填充 */
}
.pic{
display: inline-block;
}
这里要解释一下display:inline-block的作用：如果不设置这一行代码，那么页面在显示时可能会把图片和文字分开显示在不同的两列。现在加上这个代码，inline-block是一种特殊的显示类型，它课被视为块级元素和行内元素的结合，使行内元素在一行内显示直到占满，以及块级元素独立显示，不会换行的功能。
扫一扫
1247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
