---恢复内容开始---
传说中的双飞燕布局?好吧
预期效果。
左右两侧 固定像素100px,中间自适应剩余区域
1. 左float + 右float + 中 设为BFC(overflow:hidden)
注意不可用clear属性,此外 main区域需要位于left right之后
HTML结构
<div class="left">左</div> <div class="right">右</div> <div class="main">content area</div>
CSS
.container { height:100%; .left { float: left; height: 100%; width:100px; background-color:lightblue; } .right { float: right; height: 100%; width:100px; background-color:lightgreen; } .main { height:100%; overflow:hidden; background-color:lightpink; } }
2. 左absolute + 右absolut + 中margin
HTML结构 left right 和 main,顺序可以随意调换
.container { height:100%; position:relative; .left { position:absolute; left:0; top:0; height: 100%; width:100px; background-color:lightblue; } .right { position:absolute; right:0; top:0; height: 100%; width:100px; background-color:lightgreen; } .main { height:100%; margin:0 100px; background-color:lightpink; } }
3. 左 margin-left负值 + 右 margin-left负值 + 中包裹一层
<div class="main"> <div class="content">content area</div> </div> <div class="left">左</div> <div class="right">右</div>
.left { float: left; width: 100px; height: 100%; background-color: lightblue; margin-left:-100%; } .right { float: left; height: 100%; width: 100px; background-color: lightgreen; margin-left:-100px; } .main { width: 100%; height: 100%; float: left; .content { margin:0 110px; background-color:lightpink; height:100%; } }
有关于margin负值的问题,之后再整理吧
四. 中margin + 左float + 右float
和第一种方法类似,但是main需要位于 左右两栏之后。不然的话,main块先行占据了第一列,左右两栏只能在下方布局。
此外,要千万注意clear属性
<div class="container"> <div class="left">左</div> <div class="right">右</div> <div class="main">content area</div> </div>
.container { .left { float: left; width: 100px; height: 100%; background-color: lightblue; } .right { float: right; width: 100px; height: 100%; background-color: lightgreen; } .main { margin:0 100px; background-color:lightpink; height:100%; } }
---恢复内容结束---
时间: 2024-10-29 10:47:07