左侧固定右侧自适应布局
在web管理平台中左侧固定右侧自适应的布局非常常见。就像 这样。。。
（好吧我承认这样有点难看。）
话不多说 直接上代码。
html:1
2
3
4
5
6
7
8
9
10<div class="content">
<div class="left">
<p>左侧定宽</p>
</div>
<div class="right">
<div class="right-con">
<p>右侧自适应</p>
</div>
</div>
</div>
css:1
2
3
4
5
6
7
8
9
10
11
12
13.left{
position:relative;
float:left;
width:190px;
margin-right:-190px;
}
.right {
float: right;
width: 100%;
}
.right-con {
margin-left: 200px;
}
但是今天又发现了一个新的方法。1
2
3
4
5
6
7
8
9css:
.left {
float: left;
width: 190px;
}
.right {
margin-left: 200px;
}
页面上div默认宽度是100% 因为左侧元素浮动高度塌陷。所以右侧元素上浮。