自適應(yīng)布局在實(shí)際應(yīng)用中越來越普遍了，今天分享幾個(gè)自適應(yīng)布局的demo，主要是浮動(dòng)圣杯布局（也叫雙飛翼布局，主要是利用浮動(dòng)和margin負(fù)邊距實(shí)現(xiàn)的），沒有介紹絕對定位布局，都是我想，你能明白我下面的幾個(gè)例子，絕對定位布局也是非常的簡單了。
PS：圣杯布局有個(gè)好處，符合前端開發(fā)中漸進(jìn)增強(qiáng)的理念，因?yàn)闉g覽器解析是從DOM的上至下，圣杯布局能夠把頁面中重要的內(nèi)容section放到DOM前面先解析，而次要的aside內(nèi)容則放在DOM后面后解析。
下面的例子能夠解決實(shí)際應(yīng)用中絕大多數(shù)的自適應(yīng)布局問題了，有興趣的童鞋可以研究下，代碼如下：
1.左邊固定，右邊自適應(yīng)(圣杯布局的實(shí)現(xiàn))：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
<style type="text/css">
body{margin:0;padding:0}
.wrap{ width:100%; float:left}
.content{ height:300px;background:green; margin-left:200px}
.right{ width:200px; height:300px; background:red; float:left; margin-left:-100%}
</style>
</head>
<body>
<div class="wrap">
<div class="content">content</div>
</div>
<div class="right">aside</div>
</body>
</html>
2.右邊固定，左邊自適應(yīng)(圣杯布局的實(shí)現(xiàn))：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
<style type="text/css">
body{margin:0;padding:0}
.wrap{ width:100%; float:left}
.content{ height:300px;background:green; margin-right:200px}
.right{ width:200px; height:300px; background:red; float:left; margin-left:-200px;}
</style>
</head>
<body>
<div class="wrap">
<div class="content">content</div>
</div>
<div class="right">aside</div>
</body>
</html>
3.左邊和右邊固定，中間自適應(yīng)：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
<style type="text/css">
body{margin:0;padding:0}
.wrap{ width:100%; float:left}
.content{ height:300px;background:green; margin-left:200px;margin-right:200px}
.left{ width:200px; height:300px; float:left; background:yellow; margin-left:-100%}
.right{ width:200px; height:300px; background:red; float:left; margin-left:-200px}
</style>
</head>
<body>
<div class="wrap">
<div class="content">content</div>
</div>
<div class="left">aside</div>
<div class="right">aside</div>
</body>
</html>
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。