三句話總結聖盃，雙飛燕佈局

異彩發表於2019-03-27

需求 兩邊定寬，中間自適應。

實現

1. .main, .left, .right 依次排列，float: left;脫離文件流
2. .left: margin-left: -100%; .right: margin-left: 自身寬度; 拉到一行內
複製程式碼

雙飛翼

3. .main 內在嵌入div, div.style.margin: left right; 就可以實現
複製程式碼
<!DOCTYPE html>
<html>
<head>
	<title>雙飛翼</title>
	<style type="text/css">
	    html, body {
	    	width: 100%;
	    	height: 100%;
	    	padding: 0;
	    	margin: 0;
	    }
	    .left {
	    	width: 100px;
	    	background: red;
	    	margin-left: -100%;
	    }
	    .right {
	    	width: 200px;
	    	background: green;
	    	margin-left: -200px;
	    }
	    .main {
	    	width: 100%;
	    	background: blue;
	    	background: #aaccdd;
	    }
	    .inner {
	    	margin: 0 200px 0 100px;
	    }
	    .main, .left, .right {
	    	float: left;
	    }
	</style>
</head>
<body>
	<div class="main">
		<div class="inner">
			main
		</div>
	</div>
	<div class="left">
		left
	</div>
	<div class="right">
		right
	</div>
</body>
</html>
複製程式碼

聖盃佈局

3. .container 包住 .main, .left, .right新增樣式padding左右內邊距。.left: 相對定位left負的自身寬度
   .right: left正的自身寬度。
複製程式碼
<!DOCTYPE html>
<html>
<head>
    <title>聖盃佈局</title>   
	<style type="text/css">
	    html, body {
	    	width: 100%;
	    	height: 100%;
	    	padding: 0;
	    	margin: 0;
	    }
	    .container {
	    	width: 100%;
	    	height: 100%;
	    	padding: 0 200px 0 100px;
	    	overflow: hidden;
	    	box-sizing: border-box;
	    }
	    .left {
	    	width: 100px;
	    	background: red;
	    	margin-left: -100%;
	    	left: -100px;
	    }
	    .right {
	    	width: 200px;
	    	background: green;
	    	margin-left: -200px;
	    	left: 200px;
	    }
	    .main {
	    	width: 100%;
	    	background: blue;
	    	position: relative;
	    	background: #aaccdd;
	    }
	    .main, .left, .right {
	    	float: left;
	    	position: relative;
	    }
	</style>
</head>
<body>
	<div class="container">
		<div class="main">
			main
		</div>
		<div class="left">
			left
		</div>
		<div class="right">
			right
		</div>
	</div>
</body>
</html>
複製程式碼

相關文章