双飞翼布局（基础版）

来源：互联网发布：activity之间数据传递编辑：程序博客网时间：2024/05/31 06:21

页面表现形式：左右列固定宽度，中间列宽度自适应

兼容性：IE6+，Safari，chrome，firefox，Opera

实现原理：

令left1和left2脱离文档流浮动，使main块上位，设置margin值，给予左右两列宽度对应的空间，设置_margin属性是为了兼容低版本IE浏览器

除了设置 _margin-left，兼容IE7，IE8应写 *margin-left、+margin-left等hack

应用场景：三列布局，除此之外还可用于两列布局，如左图右详情的布局、搜索框等需要左右分开布局内容的块，如下：

或者

这两种页面布局都应用到

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shuangfei</title>
<style>
.main1,.left1,.right1{height: 200px;}
.left1{background-color: #ccc;width: 200px;float: left;_margin-right: -3px;}
.right1{background-color: red;width: 200px;float: right;_margin-left:-3px;}
.main1{background-color: #555;margin:0 100px 0 200px;_margin-left: -3px;}
</style>
</head>

<body>
<div class="wrap1">
<div class="left1">left</div>
<div class="right1">right</div>
<div class="main1">main</div>
</div>
</body>
</html>

阅读全文

0 0