完美的布局 - 爱码网

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">	
	<title>CSS布局</title>
	<style type="text/css">
		*{
			margin: 0;
			padding:0;
		}
		.title{
			width: 100%;
			text-align: center;
			padding-top:50px;
			font-size: 36px;
			font-weight: bold;

		}
		.middle{
			width: 900px;
			padding-top: 20px;
			height: 500px;
			margin: 0 auto;
		}
		.mid{
			float:left;
			width: 50%;
			text-align: center;

		}
		.mid div img{
			width: 426px;
			height: 240px;
		}

	</style>
</head>
<body>
	<section>
		<div class="title">ENJOY THE LIFE</div>
		<div class="middle">
		<div class="mid">
			<div><img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg" alt=""></div>
			<div>一大段字</div>
		</div>
		<div class="mid">
			<div><img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg" alt=""></div>
			<div>一大段字</div>
		</div>
		</div>
	</section>
</body>
</html>
完美的布局