两栏布局
两栏布局一般指左右两边其中一边为定宽,另一边为自适应宽度。如图:
实现
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
html, body{
height: 100%;
margin: 0;
}
.wrap{
height: 100%;
position: relative;
}
.wrap .left{
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 100%;
background-color: orange;
}
.wrap .right{
height: 100%;
margin-left: 300px;
background-color: salmon;
}
本文是按照左栏定宽右栏自适应实现的,反之亦可。