经典两栏自适应布局
HTML网页结构如下：
<body>
<div class="left">
</div>
<div class="right">
</div>
</body>
- 使用绝对定位。
CSS代码：
.left{background:#ff0088;width:200px;position:absolute;}
.right{background:#0088ff;margin-left:200px;}
2.使用浮动布局
CSS代码：
.left{background:#ff0088;width:200px;float:left;}
.right{background:#0088ff;}
如果让右侧定宽，我们需要把右侧div写在前面：
<body>
<div class="right">
</div>
<div class="left">
</div>
</body>
3.使用负margin方法
本站模板就是使用这个方法，我们需要在右侧栏内新增一个元素，而且需要把自适应的right容器写在前面：
<div class="right">
<div class="rightContent">
</div>
</div>
<div class="left">
</div>
CSS代码：
.left{background:#ff0088;width:200px;float:left;}
.right{background:#ccc;float:right;width:100%;margin-left:-200px;}
.rightContent{background:#0088ff;margin-left:200px;}
参考链接
CSS布局奇淫技巧之-多列等高
CSS 布局经典问题初步整理
您的赞助将会支持作者创作及本站运维
发表评论