總體佈局積累(3列)

關鍵:

1.根包含塊:固定寬度width,並設置左右外邊距爲auto

2.3列塊級元素:全部向左浮動,流式佈局用%設置寬度,並根據情況設置外邊距

效果:

大於根包含塊固定寬度自動居中,小於根包含塊佈局不會縮放

<pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.left,.middle,.right{
		float: left;
		width: 30%;
		height:500px;
		margin: 1%; 

	}
	.left{
		background: #9C8ADB;
	}
	.middle{
		background: #88C869;
	}
	.right{
		background: #C17F41;
	}
	.content{
		height: 700px;
		width:920px;
		background: #D87777;
		margin:0 auto;
	}
	</style>
</head>
<body>
	<div class="content">
		<div class="left"></div>
		<div class="middle"></div>
		<div class="right"></div>
	</div>
</body>
</html>




發佈了26 篇原創文章 · 獲贊 12 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章