CSS3瀑布流布局

最新推荐文章于 2021-06-22 10:41:20 发布

三爷麋了鹿

最新推荐文章于 2021-06-22 10:41:20 发布

阅读量450

点赞数

分类专栏： html5学习

本文链接：https://blog.csdn.net/u800820/article/details/41959255

版权

html5学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1.HTML页面中用一个小的div来包含图片，再用一个大的div来包含所有小的div。

2.CSS样式中，用到的重要属性是column-width，浏览器窗口宽/column-width=显示列数，所以我们只需要设置大的div的column-width属性，再将图片作为块级元素显示，并设置适当的宽度。column-rule这个属性用来设置每栏的分隔线，与border类似。

3.代码示例：

<!doctype html>
<html lang="zh-cn">
   <head>
      <title>瀑布流布局CSS3</title>	
      <meta charset="utf-8">
      <link type="text/css" rel="stylesheet" href="style.css">
   </head>
   
   <body>
   	<div id="main">
   		<div class="box">
   			<div class="pic">
   			   <img src="psb.jpg">	
   			</div>
   		</div>
   		<div class="box">
   			<div class="pic">
   			   <img src="m1.jpg">	
   			</div>
   		</div>
   		<div class="box">
   			<div class="pic">
   			   <img src="index.png">	
   			</div>
   		</div>
   		<div class="box">
   			<div class="pic">
   			   <img src="psb.jpg">	
   			</div>
   		</div>
   		<div class="box">
   			<div class="pic">
   			   <img src="m1.jpg">	
   			</div>
   		</div>
   		<div class="box">
   			<div class="pic">
   			   <img src="index.png">	
   			</div>
   		</div>
   		<div class="box">
   			<div class="pic">
   			   <img src="psb.jpg">	
   			</div>
   		</div>
   		<div class="box">
   			<div class="pic">
   			   <img src="m1.jpg">	
   			</div>
   		</div>
   		<div class="box">
   			<div class="pic">
   			   <img src="index.png">	
   			</div>
   		</div>
   		<div class="box">
   			<div class="pic">
   			   <img src="psb.jpg">	
   			</div>
   		</div>
   		<div class="box">
   			<div class="pic">
   			   <img src="m1.jpg">	
   			</div>
   		</div>
   		<div class="box">
   			<div class="pic">
   			   <img src="index.png">	
   			</div>
   		</div>
   		<div class="box">
   			<div class="pic">
   			   <img src="psb.jpg">	
   			</div>
   		</div>
   		<div class="box">
   			<div class="pic">
   			   <img src="m1.jpg">	
   			</div>
   		</div>
   		<div class="box">
   			<div class="pic">
   			   <img src="index.png">	
   			</div>
   		</div>
   		<div class="box">
   			<div class="pic">
   			   <img src="psb.jpg">	
   			</div>
   		</div>
   		<div class="box">
   			<div class="pic">
   			   <img src="m1.jpg">	
   			</div>
   		</div>
   		<div class="box">
   			<div class="pic">
   			   <img src="index.png">	
   			</div>
   		</div>
   	</div>
   </body>
</html>

CSS样式：


#main{
   column-width:202px;
   -moz-column-width:202px;
   -webkit-column-width:202px;
   column-rule:1px dashed #f00;
   -moz-column-rule:1px dashed #f00;
   -webkit-column-rule:1px dashed #f00;
}
.box{
	padding: 10px 0 0 15px;}
.pic{
	padding:10px;
	border: 1px solid #ccc;
	box-shadow:0 0 5px #ccc;
	border-radius:5px;
	width:165px;}
.pic img{
	display:block;
	width:165px;
	height:auto;}

三爷麋了鹿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3瀑布流布局

1.HTML页面中用一个小的div来包含图片，再用一个大的div来包含所有小的div。2.CSS样式中，用到的重要属性是column-width，浏览器窗口宽/column-width=显示列数，所以我们只需要设置大的div的column-width属性，再将图片作为块级元素显示，并设置适当的宽度。column-rule这个属性用来设置每栏的分隔线，与border类似。3.代码示例：
复制链接

扫一扫