HTML怎么建立两行四列的li,关于CSS如何实现多行多列布局的方法

这篇文章主要介绍了CSS实现多行多列的布局的实例代码,需要的朋友可以参考下

1.两列多行：

HTML:

box1:实现两列多行布局

• 111
• 222
• 333

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及以上的浏览器，中间的空隙就是两个并排p宽度之和，100%减去后剩下的宽度；

既然提到了nth-child(),那么就要说一下nth-of-type()，也是只兼容ie9及以上的浏览器。它与nth-child的区别是：

如果要让第二个p标签背景为红色，那么，p:nth-child(4)这个能实现效果；而p:nth-of-type(2)，就能实现。所以nth-of-type不管p标签前面有多少内容，都只认p的第二个元素。而nth-child却是找它父级的第几个元素。在这种情况下nth-of-type的优点就体现出来了。

2.多行多列

HTML：

box2:多行多列

• 111

• 222

• 333

• 444