左侧固定宽度,右侧自适应。
BFC实现
<div class="container">
<div class="aside">左列宽度固定</div>
<div class="main">右列宽度自适应</div>
<div>
.container {
/* position: relative; */
}
.container .aside {
float: left;
width: 200px;
background: red;
height:200px;
}
.container .main {
overflow: hidden;
background: blue;
height:200px;
}
Table实现
<div id="main">
<div id="left">DIVA</div>
<div id="right">DIVB</div>
</div>
<div id="bottom">DIVC</div>
#left, #right{
height: 200px;
}
#left {
width:200px;
background: red;
}
#right {
background: blue;
}
#main { display: table; width: 100%; }
#left,#right { display: table-cell; }
#right { width: auto; }
相对绝对定位
<div class="container">
<div class="aside">左列宽度固定</div>
<div class="main">右列宽度自适应</div>
<div>
.container {
position: relative;
}
.container .aside {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
background: red;
}
.container .main {
height: 200px;
margin-left: 200px;
background: blue;
}
若要两侧都是自适应时,则使用百分比。
网友评论