①使用浮动布局来实现
- 左侧元素与右侧元素优先渲染,分别向左和向右浮动
- 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动压到左右两个浮动元素的下面,随后在中间元素中再添加一个div元素并给其设置 margin 左右边距分别为左右两列的宽度,就可以将新元素调整到正确的位置。
html部分:
<div class="container"> <div class="left">this is left</div> <div class="right">this is right</div> <div class="center"> <div class="middle"> this is center </div> </div> </div>
css部分:
.container { width: 100%; height: 100%; overflow: hidden; } .left { float: left; width: 400px; height: 800px; background-color: black; } .center { width: 100%; height: 1000px; background-color: yellow; } .middle { background-color: #fff; margin: 0 400px; height: 850px; } .right { float: right; width: 400px; height: 800px; background-color: red; }
②双飞翼布局
主要利用了浮动、负边距、相对定位三个布局属性,使三列布局就像小鸟一样,拥有中间的身体和两侧的翅膀。
html部分:
<div class="grid"> <div id="div-middle-02"> <div id="middle-wrap-02"><span>div-middle</span></div> </div> <div id="div-left-02"><span>div-left</span></div> <div id="div-right-02"><span>div-right</span></div> </div>
css部分:
#div-middle-02 { float: left; background-color: #fff9ca; width: 100%; height: 80px; } #div-left-02 { float: left; background-color: red; width: 150px; /* 重点看这里 */ margin-left: -100%; height: 50px; } #div-right-02 { float: left; background-color: yellow; width: 200px; /* 重点看这里 */ margin-left: -200px; height: 50px; } #middle-wrap-02 { margin: 0 200px 0 150px; background-color: pink; }
③通过左右元素设置定位,中间元素设置 auto; 来实现
html部分:
<div class="container"> <div class="left">this is left</div> <div class="center"> this is center </div> <div class="right">this is right</div> </div>
css部分:
.container { width: 100%; height: 100%; position: relative; } .left { position: absolute; left: 0; top: 0; width: 400px; height: 800px; background-color: black; } .center { /* 如果没有这一句,那么,center这个div的文字就不会自动换行 */ width: auto; margin: 0 400px; height: 1000px; background-color: yellow; } .right { position: absolute; top: 0; right: 0; width: 400px; height: 900px; background-color: red; }
④利用 BFC实现
1.同样的左右两列元素优先渲染,并分别左右浮动。
2.接下来将中间元素设置 overflow: hidden; 成为 BFC 元素块,不与两侧浮动元素叠加,自然能够插入自己的位置。
html部分:
<div class="container"> <div class="left">this is left</div> <div class="right">this is right</div> <div class="center"> this is center </div> </div>
css部分:
.container { width: 100%; height: 100%; overflow: hidden; } .left { float: left; width: 400px; height: 800px; background-color: black; } .center { overflow: hidden; height: 1000px; background-color: yellow; } .right { float: right; width: 400px; height: 800px; background-color: red; }