CSS实现多行多列的布局的实例代码(3)

.box4 { background: #EEEEEE; color: white; margin-top: 20px; } .box4 .header { width: 100%; background: #008000; height: 50px; } .box4 .container { clear: both; overflow: hidden; padding: 0 130px 0 100px; position: relative; } .box4 .container .left { width: 100px; background: #008B8B; height: 100px; position: absolute; top: 0px; left: 0px; } .box4 .container .center { background: #00BFFF; height: 100px; width: 100%; } .box4 .container .right { width: 130px; background: #FA8072; height: 100px; position: absolute; top: 0px; right: 0px; } .box4 .footer { width: 100%; background: #222222; height: 30px; }

这种方式实现的思路是：左右两边绝对定位，然后中间的div设置padding，也能达到同样的效果。也不用在意中间的三个div的排版顺序，我一直都在用这种方式。

也兼容ie7，ie6没测试过

5.双飞翼布局

HTML：

<div class="box5"> <div class="header">双飞翼布局顶部</div> <div class="container"> <div class="center"> <div class="center-in"> 中间自适应宽度,注意这个center是在left的div前面 </div> </div> <div class="left"> 左部固定宽度 </div> <div class="right"> 右部固定宽度 </div> </div> <div class="footer">双飞翼布局底部</div> </div>

CSS:

.box5 { background: #EEEEEE; color: white; margin-top: 20px; } .box5 .header { width: 100%; background: #008000; height: 50px; } .box5 .container { clear: both; overflow: hidden; } .box5 .container .left { width: 100px; float: left; background: #008B8B; height: 100px; margin-left: -100%; } .box5 .container .center { background: #00BFFF; height: 100px; float: left; width: 100%; } .box5 .container .center .center-in { margin: 0 130px 0 100px; } .box5 .container .right { width: 130px; float: left; background: #FA8072; height: 100px; margin-left: -130px; } .box5 .footer { width: 100%; background: #222222; height: 30px; }

双飞翼布局和圣杯布局看起来都差不多，但是最大的不同就是：双飞翼布局中center中间的这个div里面还有一个div，主要通过这个div的margin值来达到布局的目的。然后left和right这两个div都不用再设置相对定位relative。其它的都基本一样

兼容ie7，ie6未测试过。

还有许多多行多列的布局方式，比如css3的flex，inline-block等等。。只要有思路，再难的布局都能实现。

总结

以上所述是小编给大家介绍的CSS实现多行多列的布局，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

（编辑：ASP站长网）