1.多列多行：
HTML:
<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（）,那末就要说1下nth-of-type（），也是只适配ie9及以上的访问器。它与nth-child的差别是：
<div class="box">
<h1></h1>
<h1></h1>
<p></p>
<p></p>
<p></p>
</div>
假如要让第2个p标识情况为鲜红色，那末，p:nth-child(4)这个能完成实际效果；而p:nth-of-type(2)，就可以完成。因此nth-of-type无论p标识前面有是多少內容，都只认p的第2个元素。而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: ⑴0px;
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是1样的。li里边加div只是以便让实际效果显著，要不然给li再加情况，因为box-sizing：border-box的存在，li看起来便是没实际效果所有连在1起的。
假如要完成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: ⑴00%;
position: relative;
left: ⑴00px;
}
.box3 .container .center {
background: #00BFFF;
height: 100px;
float: left;
width: 100%;
}
.box3 .container .right {
width: 130px;
float: left;
background: #FA8072;
height: 100px;
margin-left: ⑴30px;
position: relative;
right: ⑴30px;
}
.box3 .footer {
width: 100%;
background: #222222;
height: 30px;
}
圣杯合理布局最关键的是正中间那并列的3个div，左右两个div，我只是拿来滥竽充数的。。。
完成全过程大概以下：1.这3个div的HTML放置的前后次序是有注重的，center这个显示信息在正中间的div，在html里是排在最前面的，随后是left，最终是right。
2.在container沒有设定padding，left这个div和right这个div都没设定margin与相对性精准定位relative以前，3个div都float：left。这时候候网页页面上显示信息的是center占有1行，随后是left这个div，随后是right这个div
3.随后left这个div设定margin-left：⑴00%。这样left就可以从第2排蹦到第1排最左侧并遮盖center这个div。
4.right这个div设定margin-left: ⑴30px;这个值是它自身宽度的尺寸。随后right这个div也蹦到第1排最右侧并遮盖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，也能做到一样的实际效果。也无需在乎正中间的3个div的排版次序，我1直都在用这类方法。
也适配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: ⑴00%;
}
.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: ⑴30px;
}
.box5 .footer {
width: 100%;
background: #222222;
height: 30px;
}
双飞翼合理布局和圣杯合理布局看起来都类似，可是最大的不一样便是：双飞翼合理布局中center正中间的这个div里边也有1个div，关键根据这个div的margin值来做到合理布局的目地。随后left和right这两个div都无需再设定相对性精准定位relative。其它的都基础1样
适配ie7，ie6未检测过。
也有很多多行两列的合理布局方法，例如css3的flex，inline-block这些。。要是有思路，再难的合理布局都能完成。
总结
以上所述是网编给大伙儿详细介绍的CSS完成多行两列的合理布局，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！