基本思路:
- 左右2列采用绝对定位来布局
- 中间内容部分采用margin挤压出来
HTML结构
<div class="container"> <div class="left">左侧</div> <div class="right">右侧</div> <div class="main">主体</div> </div>
CSS样式
<style type="text/css"> .container{ position: absolute; left: 0; right: 0; } .left{ top: 0; left: 0; position: absolute; width: 200px; height: 600px; background-color: aqua; } .right{ top: 0; right: 0; position: absolute; width: 200px; height: 600px; background-color: yellowgreen; } .main{ margin-left: 200px; margin-right: 200px; height: 600px; background-color: papayawhip; } </style>
转载请注明:大灰牛博客 » 网页布局设计|三列布局-左右绝对定位-中间适应