Css3 Column实现瀑布流

最新推荐文章于 2022-11-15 20:16:52 发布

月疯

最新推荐文章于 2022-11-15 20:16:52 发布

阅读量547

点赞数 1

分类专栏：【HTML5】

本文链接：https://blog.csdn.net/chehec2010/article/details/119456468

版权

【HTML5】专栏收录该内容

45 篇文章 6 订阅

订阅专栏

基础知识总结：

CSS3多列column rule

1、column-count
说明：属性规定元素应该被分隔的列数
适用于：除table外的非替换块级元素，table，cells,inline-block元素

2、column-gap
说明：

属性规定列之间的间隔大小

3、column-rule
说明：
设置或检索对象的列与列之间的边框。复合属性。
column-rule-color规定列之间规则的颜色。
column-rule-style规定列之间的样式。
column-rule-width规定列之间规则的宽度。

4、column-fill
说明：
设置或者检索对象所有列的高度是否统一
auto：列高度自适应内容
balance：所有列的高度以其中最高的一列统一

5、column-span
说明：
设置或者检索对象元素是否横跨所有列。
none：不跨列
all：横跨所有列

6、column-width
说明：
设置每列的宽度

7、columns
说明：
设置或检索对象的列数和每列的宽度。复合属性
<"column-width">|<"column-count">

注释：
internet Explorer10和Opera支持多列属性。
firfox需要前缀-moz-
Chrome和Safari需要前缀-webkit-

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body{
				background: #352323;
				background: url(img/bb.gif);
				
			}
			img{
				width: 100%;
				display: block;
				}
			section{
				width: 95%;
				margin: 0 auto;
				column-count: 5;
				column-gap: 10px;
				column-fill: auto;
			}
			figure{
				border: 1px solid pink;
				margin-bottom: 10px;
				padding: 5px;
				break-inside: avoid;/*反之元素出现中断*/
			}
			figcaption{
				font-size: 18px;
				color: #D2691E;
				text-align: center;
				font-weight: bold;
				padding: 10px 0;
			}
		</style>
	</head>
	<body>
		<section>
			<figure>
			<img src="./img/1.jpg" >
			<figcaption>爱你终身，感谢有你！！！</figcaption>
			</figure>
			<figure>
			<img src="./img/2.jpg" >
			<figcaption>爱你终身，感谢有你！！！</figcaption>
			</figure>
			<figure>
			<img src="./img/3.jpg" >
			<figcaption>爱你终身，感谢有你！！！</figcaption>
			</figure>
			<figure>
			<img src="./img/4.jpg" >
			<figcaption>爱你终身，感谢有你！！！</figcaption>
			</figure>
			<figure>
			<img src="./img/5.jpg" >
			<figcaption>爱你终身，感谢有你！！！</figcaption>
			</figure>
			<figure>
			<img src="./img/6.jpg" >
			<figcaption>爱你终身，感谢有你！！！</figcaption>
			</figure>
			<figure>
			<img src="./img/7.jpg" >
			<figcaption>爱你终身，感谢有你！！！</figcaption>
			</figure>
			<figure>
			<img src="./img/8.jpg" >
			<figcaption>爱你终身，感谢有你！！！</figcaption>
			</figure>
			<figure>
			<img src="./img/9.jpg" >
			<figcaption>爱你终身，感谢有你！！！</figcaption>
			</figure>
			<figure>
			<img src="./img/10.jpg" >
			<figcaption>爱你终身，感谢有你！！！</figcaption>
			</figure>
			<figure>
			<img src="./img/11.jpg" >
			<figcaption>爱你终身，感谢有你！！！</figcaption>
			</figure>
		</section>
	</body>
</html>

月疯

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css3 Column实现瀑布流

基础知识总结：CSS3多列column rule1、column-count说明：属性规定元素应该被分隔的列数适用于：除table外的非替换块级元素，table，cells,inline-block元素2、column-gap说明：属性规定列之间的间隔大小3、column-rule说明：设置或检索对象的列与列之间的边框。复合属性。column-rule-color规定列之间规则的颜色。column-rule-style规定列之间的样式。column-rule..
复制链接

扫一扫