1.两列多行:
HTML:
css;"><div class="box1"> box1:实现两列多行布局 <ul> <li>111</li> <li>222</li> <li>333</li> </ul></div>
CSS:
.box1 { width: 500px; background: #EEEEEE;}.box1 ul { clear: both; overflow: hidden;}.box1 ul li { width: 48%; height: 100px; margin-bottom: 10px; background: skyblue; float: left;}.box1 ul li:nth-child(even) { margin-left: 4%;}
这用到了nth-child()
,兼容ie9及以上的浏览器,中间的空隙就是两个并排div宽度之和,100%减去后剩下的宽度;
既然提到了nth-child()
,那么就要说一下nth-of-type()
,也是只兼容ie9及以上的浏览器。它与nth-child
的区别是:
<div class="box"> <h1></h1> <h1></h1> <p></p> <p></p> <p></p></div>
如果要让第二个p标签背景为红色,那么,p:nth-child(4)这个能实现效果;而p:nth-of-type(2),就能实现。所以nth-of-type不管p标签前面有多少内容,都只认p的第二个元素。而nth-child却是找它父级的第几个元素。在这种情况下nth-of-type的优点就体现出来了。
2.多行多列
HTML:
<div class="box2"> box2:多行多列 <ul> <li> <div class="com"> 111 </div> </li> <li> <div class="com"> 222 </div> </li> <li> <div class="com"> 333 </div> </li> <li> <div class="com"> 444 </div> </li> </ul></div>
CSS:
.box2 { background: #EEEEEE; margin-top: 20px; width: 500px;}.box2 ul { overflow: hidden; margin-left: -10px; background: #EEEEEE;}.box2 ul li { width: 33.3333%; height: 50px; float: left; padding-left: 10px; box-sizing: border-box; margin-bottom: 10px;}.box2 ul li .com { height: inherit; background: skyblue;}
这里实现的原理是:子级使用padding-left(元素间的间隙)和box-sizing:border-box
,父级使用margin-left负值,这个值和子级padding-left
是一样的。li里面加div只是为了让效果明显,不然给li加上背景,由于box-sizing:border-box
的存在,li看起来就是没效果全部连在一起的。
如果要实现2列,4列,5列等多列,只需修改li的宽度(平均分配)就行了。
这种做法兼容ie8及以上的浏览器,在ie7下,每个li的宽度大概比正常的少2%左右,比如3列,正常显示的话,每个li宽度是33.333%,但是ie7下需设置31.333%,才能基本正常显示。。。这具体的原因没深究,后面有时间再来补这个坑 ×××
3.圣杯布局:
HTML:
<div class="box3"> <div class="header">圣杯布局(使用浮动)顶部</div> <div class="container"> <div class="center"> 中间自适应宽度,注意这个center是在left的div前面 </div> <div class="left"> 左部固定宽度 </div> <div class="right"> 右部固定宽度 </div> </div> <div class="footer">圣杯布局底部</div></div>
CSS:
.box3 { background: #EEEEEE; color: white; margin-top: 20px;}.box3 .header { width: 100%; background: #008000; height: 50px;}.box3 .container { clear: both; overflow: hidden; padding: 0 130px 0 100px;}.box3 .container .left { width: 100px; float: left; background: #008B8B; height: 100px; margin-left: -100%; position: relative; left: -100px;}.box3 .container .center { background: #00BFFF; height: 100px; float: left; width: 100%;}.box3 .container .right { width: 130px; float: left; background: #FA8072; height: 100px; margin-left: -130px; position: relative; right: -130px;}.box3 .footer { width: 100%; background: #222222; height: 30px;}
圣杯布局最主要的是中间那并列的3个div,上下两个div,我只是拿来充数的。。。
实现过程大致如下:1.这三个div的HTML摆放的先后顺序是有讲究的,center这个显示在中间的div,在html里是排在最前面的,然后是left,最后是right。
2.在container没有设置padding,left这个div和right这个div都没设置margin与相对定位relative之前,三个div都float:left。这时候页面上显示的是center独占一行,然后是left这个div,然后是right这个div
3.然后left这个div设置margin-left:-100%。这样left就能从第二排蹦到第一排最左边并覆盖center这个div。
4.right这个div设置margin-left: -130px;这个值是它自己宽度的大小。然后right这个div也蹦到第一排最右边并覆盖center这个div。
5.这个时候container设置padding,这个padding的大小是left与right这两个div分别的宽度,然后left与right这两个div分别再设置相对定位,移动自己宽度的距离,就正常显示了。
这种布局方式ie7都兼容,ie6没有测试过。。。
4.仿圣杯布局
HTML:
<div class="box4"> <div class="header">圣杯布局2(使用定位)顶部</div> <div class="container"> <div class="left"> 左部固定宽度 </div> <div class="center"> 中间自适应宽度,无需考虑顺序 </div> <div class="right"> 右部固定宽度 </div> </div> <div class="footer">圣杯布局2底部</div></div>
CSS:
.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实现多行多列的布局,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对VeVb武林网网站的支持!
新闻热点
疑难解答