master

分支 (1)

管理

管理

master

jsdemo
/
flow.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>瀑布流布局</title>
		<style>
			body{
				background-color: #f2f2f2;
				margin: 0;
				padding: 0;
			}
			*{
				margin: 0;
				padding: 0;
			}
			.wraper{
				width:780px;
				margin: 30px auto;
			}
			.flow-box{
				width:240px;
				float: left;
				display: inline;
				margin-left: 20px;
				background-color: #fff;
				margin-bottom: 20px;
			}

			.flow-img{
				width:100%;
				line-height: 100px;
				text-align: center;
				font-size: 30px;
			}
			.flow-des{
				padding: 20px;
				height: 60px;
				font-size: 14px;
			}

			.flow-img1{
				height: 230px;
				background-color: pink;
			}
			.flow-img2{
				height: 150px;
				background-color: orchid;
			}
			.flow-img3{
				height: 350px;
				background-color: olivedrab;
			}
			.flow-img4{
				height: 250px;
				background-color: blueviolet;
			}
			.flow-img5{
				height: 380px;
				background-color: indianred;
			}
			.flow-img6{
				height: 180px;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div class="wraper">
			<div class="flow-box">
				<div class="flow-img flow-img1">1</div>
				<p class="flow-des">我是第1个</p>
			</div>
			<div class="flow-box">
				<div class="flow-img flow-img2">2</div>
				<p class="flow-des">我是第2个</p>
			</div>
			<div class="flow-box">
				<div class="flow-img flow-img3">3</div>
				<p class="flow-des">我是第3个</p>
			</div>
			<div class="flow-box">
				<div class="flow-img flow-img4">4</div>
				<p class="flow-des">我是第4个</p>
			</div>
			<div class="flow-box">
				<div class="flow-img flow-img5">5</div>
				<p class="flow-des">我是第5个</p>
			</div>
			<div class="flow-box">
				<div class="flow-img flow-img6">6</div>
				<p class="flow-des">我是第6个</p>
			</div>
		</div>
	</body>
</html>