css 实现两列布局(一列固定宽度一列自适应)
左边自适应,右边定宽的几种方案
html
代码:
<div id="wrap">
<div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
<div id="content" style="height:500px;background:#000;color:#fff;">自适应区</div>
</div>
- 固定宽度区浮动,自适应区不设宽度而设置
margin
#sidebar {
float: right;
width: 300px;
}
#content {
margin-right: 300px;
}
- 固定区域绝对定位,自适应区域
margin
#wrap{
position: relative;
}
#sidebar {
position: absolute;
top: 0;
right: 0;
width: 300px;
}
#content {
margin-right: 300px;
}
- 使用
display: table
的方式
此时需要调整一下html
的顺序
<div id="wrap">
<div id="content" style="height:500px;background:#000;color:#fff;">自适应区</div>
<div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
</div>
#wrap{
display: table;
}
#sidebar {
display: table-cell;
width: 300px;
}
#content {
display: table-cell;
}
float
和margin
的配合使用
html
调整如下
<div id="wrap">
<div id="content" style="height:500px;background:#000;color:#fff;">
<div class="contentInner">
自适应区
</div>
</div>
<div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
</div>
#content {
float: left;
margin-left: -300px;
width: 100%;
}
#content .contentInner {
margin-left: 300px;
}
#sidebar {
float: right;
width: 300px;
}