css3实现瀑布流效果

最新推荐文章于 2024-08-01 15:19:04 发布

frontEnd-Engineer

最新推荐文章于 2024-08-01 15:19:04 发布

阅读量469

点赞数

分类专栏： css3 文章标签： css3 瀑布流效果

本文链接：https://blog.csdn.net/qq_36341800/article/details/54948879

版权

这个示例展示了如何利用CSS3的column-count和column-gap属性实现一个简单的瀑布流布局。内容包括多列图片展示，图片下方附带描述，以及用户信息。这种布局常见于图像分享或博客网站，为用户提供美观的视觉体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS3瀑布流布局</title>
		<style type="text/css">
			body {
				background-color: #f1f1f1;
			}
			.container {
				width: 60%;
				margin: 0 auto;
				font-size: 14px;
				color: #333;
			}
			.column-box {
				-moz-column-count: 3;
				-webkit-column-count: 3;
				column-count: 3;
				-moz-column-gap: 1em;
				-webkit-column-gap: 1em;
				column-gap: 1em;
			}
			.column-item {
				padding: 0.2em;
				-moz-page-break-inside: avoid; /*避免在元素内部插入分页符*/
				-webkit-column-break-inside: avoid;
				break-inside: avoid;
				background: white;
				-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.24);
				-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.24);
				box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.24);
			}
			.column-item img.bigimg {
				width: 100%;
				padding-bottom: 1em;
				border-bottom: 1px solid #ccc;
			}
			.verticalAlign {
				vertical-align: middle;
			}
			.user {
				padding-bottom: 0.5em;	
			}
			.user p {
				font-size: 14px;
				color: #666;
				padding: 0;
				line-height: 8px;
			}
			.user p:first-child {
				padding-top: 8px;
			}
			.user p span {
				font-size: 12px;
				color: #999;
			}
			.column-item-2 {
				width: 20%;
				float: left;
			}
			.column-item-2 img {
				width: 100%;
				border-radius: 50%;
			}
			.column-item-2 img:after {
				content: '