萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 關於自適應布局的處理(利用浮動和margin負邊距實現)

關於自適應布局的處理(利用浮動和margin負邊距實現)

自適應布局在實際應用中越來越普遍了,今天分享幾個自適應布局的demo,主要是浮動聖杯布局(也叫雙飛翼布局,主要是利用浮動和margin負邊距實現的),沒有介紹絕對定位布局,都是我想,你能明白我下面的幾個例子,絕對定位布局也是非常的簡單了。

PS:聖杯布局有個好處,符合前端開發中漸進增強的理念,因為浏覽器解析是從DOM的上至下,聖杯布局能夠把頁面中重要的內容section放到DOM前面先解析,而次要的aside內容則放在DOM後面後解析。
下面的例子能夠解決實際應用中絕大多數的自適應布局問題了,有興趣的童鞋可以研究下,代碼如下:

1.左邊固定,右邊自適應(聖杯布局的實現):
 

復制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</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.右邊固定,左邊自適應(聖杯布局的實現):

復制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</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.左邊和右邊固定,中間自適應:

復制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</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>
copyright © 萬盛學電腦網 all rights reserved