首先我们确定有几种方案,然后再分析其优缺点。
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+;
四种方案都分析完了,大家可以根据需要来做选择使用。