首先我們確定有幾種方案,然後再分析其優缺點。
1、float+margin;
2、position+margin;
3、float+負margin+嵌套div;
4、display:table+display:table-cell;
上代碼:
第一種方案:float+margin
<!DOCTYPE html>
<html>
<head>
<meta content="utf-8" charset="utf-8" />
<title>測試Css佈局-左側固定寬度右側自適應</title>
<style>
.wrap{background: gray; width:1000px;margin:0px auto;}
.aside-left{width:200px;float:left; background:red; margin-left:10px;height:80px;}
.main{margin-left:210px; background: blue; height:50px;}
.clear{clear:both;}
</style>
</head>
<body>
<div class="wrap">
<div class="aside-left">這是側邊</div>
<div class="main">
這是主體
<div class="clear"></div>
這是清除浮動後
</div>
</div>
<div class="footer">
<span>這是底部</span>
</div>
</body>
</html>
這種方案,要固定寬度的float,而且要放在自適應容器的前面。
優勢:簡單,快。
缺點:1、當浮動的高度大於自適應的高度時,父容器在最後也沒清除浮動,則父容器的高度是自適應的高度;
2、當自適應裏的子容器有清除浮動時,其之後的元素會在浮動高度之下。
第二種方案:position+margin
<!DOCTYPE html>
<html>
<head>
<meta content="utf-8" charset="utf-8" />
<title>測試Css佈局-左側固定寬度右側自適應</title>
<style>
.wrap{background: gray; width:1000px;margin:0px auto; position: relative;}
.aside-left{position: absolute; left:0px; top:0px; width:200px; height:80px;background: red; }
.main{margin-left:210px; background: blue; }
.clear{clear:both;}
</style>
</head>
<body>
<div class="wrap">
<div class="aside-left">這是側邊</div>
<div class="main">
這是主體
<div class="clear"></div>
這是清除浮動後
</div>
</div>
<div class="footer">
<span>這是底部</span>
</div>
</body>
</html>
這種佈局,父容器是position:relative; 固定寬度是position:absolute; 自適應是margin;
優點:簡單,方便;
缺點:當固定寬度的高度大於自適應的高度時,總體高度是和自適應的高度一致的。
第三種方案:float+負margin+嵌套div;
<!DOCTYPE html>
<html>
<head>
<meta content="utf-8" charset="utf-8" />
<title>測試Css佈局-左側固定寬度右側自適應</title>
<style>
.wrap{background: gray; width:1000px;margin:0px auto; overflow: hidden; }
.aside-left{ width:200px; height:80px;background: red; float:left;}
.main{background: blue; width:100%;margin-right:-210px; float:right;}
.main-content{margin-right:200px;}
.clear{clear:both;}
</style>
</head>
<body>
<div class="wrap">
<div class="aside-left">這是側邊</div>
<div class="main">
<div class="main-content">
這是主體
<div class="clear"></div>
這是清除浮動後
</div>
</div>
<div class="clear"></div>
</div>
<div class="footer">
<span>這是底部</span>
</div>
</body>
</html>
這種方案是,父容器overflow:hidden; 兩個子容器都float, 不同的方向,然後自適應的容器負margin,在其中加個子容器包住所有的內容給個正margin。最後,清除一下浮動。
優點:能解決問題,沒有什麼負影響。
缺點:寫法複雜。
第四種方案:display:table+display:table-cell
<!DOCTYPE html>
<html>
<head>
<meta content="utf-8" charset="utf-8" />
<title>測試Css佈局-左側固定寬度右側自適應</title>
<style>
.wrap{background: gray; width:1000px;margin:0px auto; display:table; }
.aside-left{ width:200px; height:80px;background: red; display: table-cell;}
.main{background: blue; display: table-cell;}
.clear{clear:both;}
</style>
</head>
<body>
<div class="wrap">
<div class="aside-left">這是側邊</div>
<div class="main">
這是主體
<div class="clear"></div>
這是清除浮動後
</div>
</div>
<div class="footer">
<span>這是底部</span>
</div>
</body>
</html>
這種方案就是父容器設置display:table;兩個子容器都設置display:table-cell; 然後給固定寬度的一個寬度,自適應的就會自適應。
優點:寫法簡單;
缺點:瀏覽器兼容性:ie7+;
四種方案都分析完了,大家可以根據需要來做選擇使用。