基本思路:
- 给2列添加一个定位的父集区块,并设置定位属性,一般设置为相对定位
- 给左右2个区块分别使用绝对定位
- 父集区块/定位父集必须设置宽度width
HTML结构
<div class="container clear"> <div class="left">左侧</div> <div class="right">右侧</div> </div>
CSS样式
<style type="text/css"> .container{ /*position: absolute; right: 0;右边定位起始点 left: 0;左边定位起始点*/ position:relative; margin: auto;/*左右边距自动挤压,即自动居中*/ max-width: 960px;/*设置最大宽度*/ } .left{ position: absolute; top: 0; left: 0; width: 200px; height: 600px; background-color: #008B8B } .right{ position: absolute; top: 0; right: 0; width: 750px; height: 600px; background-color: #FFFF00; } </style>
转载请注明:大灰牛博客 » html网页布局|两列布局-左右二侧-绝对定位