html代码:
<div class="left">固定宽度区</div> <div class="right">自适应宽度区</div> <div class="footer">底部区</div>
css代码:
/*第一种方法(浮动)*/ .left { float: left; width: 100px; height: 400px; background-color: blue; } .right { margin-left: 100px; height: 200px; background: green; } .footer { clear: both; background-color: yellow; } /*第二种方法(相对布局)*/ .left { position: absolute; top: 0; left: 0; width: 100px; height: 150px; background-color: blue; } .right { margin-left: 100px; height: 150px; background-color: green; } .footer { background-color: yellow; } /*第三种方法(flex)*/ .left { float: left; width: 100px; height: 150px; background-color: blue; } .right { display: flex; flex: 1; height: 150px; background-color: green; } .footer { background-color: yellow; }