海阔天空

手机扫码查看

布局扩展之等高布局
利用margin-bottom负值和padding-bottom正值配合实现

<style>
*{margin: 0;padding: 0;}
.box{border: 10px solid;overflow: hidden;}
.box1{float: left;width: 100px;background: red;margin-bottom: -2000px;padding-bottom: 2000px}
.box2{float: right;width: 100px;background: blue;margin-bottom: -2000px;padding-bottom: 2000px}
</style>

<div class=”box”>
<div class=”box1″>
<p>1111</p>
<p>1111</p>
<p>1111</p>
<p>1111</p>
<p>1111</p>
</div>
<div class=”box2″>
<p>1111</p>
<p>1111</p>
<p>1111</p>
<p>1111</p>
<p>1111</p>
<p>1111</p>
</div>
</div>

布局扩展之双飞翼布局
三列布局，左右固定，中间自适应

<style>
*{margin: 0;padding: 0;}
.header{height: 100px;background: red;}
.center{height: 200px;float: left;width: 100%;}
.center p{background: yellow;height: 100%;margin: 0 150px 0 100px}
.left{float: left;width: 100px;height: 200px;background: #666;margin-left: -100%}
.right{float: left;width: 150px;height: 200px;background: blue;margin-left: -150px;}
</style>

<div class=”header”></div>
<div class=”container”>
<div class=”center”>
<p>双飞翼布局</p>
</div>
<div class=”left”></div>
<div class=”right”></div>
</div>

圣杯布局

<style>
*{margin: 0;padding: 0;}
.header{height: 100px;background: red;}
.container:after{content: “”;clear: both;display: block;}
.container{background: yellow;margin: 0 150px 0 100px;}
.center{height: 200px;float: left;width: 100%;}
.left{float: left;width: 100px;height: 200px;background: blue;margin-left: -100%;position: relative;left: -100px;}
.right{float: left;width: 150px;height: 200px;background: green;margin-left: -150px;position: relative;right: -150px;}
</style>

<div class=”header”></div>
<div class=”container”>
<div class=”center”></div>
<div class=”left”></div>
<div class=”right”></div>
</div>