How to implement multi-row and multi-column layout using CSS

This article mainly introduces the example code of CSS to implement multi-row and multi-column layout. Friends who need it can refer to it

1. Two columns and multiple rows:

HTML:

<p class="box1">
    box1:实现两列多行布局
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</p>

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%;
}

This uses nth-child(), which is compatible with browsers ie9 and above. There are two gaps in the middle. The sum of the side-by-side p widths, the remaining width after subtracting 100%;

Since nth-child() is mentioned, then we need to talk about nth-of-type (), which is also only compatible with browsers ie9 and above. The difference between it and nth-child is:

<p class="box">
    <h1></h1>
    <h1></h1>
    <p></p>
    <p></p>
    <p></p>
</p>

If you want the background of the second p tag to be red, then, p: nth-child(4) can achieve the effect; and p:nth-of-type(2) can achieve the effect. Therefore, nth-of-type only recognizes the second element of p no matter how much content is in front of the p tag. But nth-child is to find the first element of its parent. In this case, the advantages of nth-of-type are reflected.

2. Multiple rows and multiple columns

# #HTML:

<p class="box2">
    box2:多行多列
    <ul>
        <li>
            <p class="com">
                111
            </p>
        </li>
        <li>
            <p class="com">
                222
            </p>
        </li>
        <li>
            <p class="com">
                333
            </p>
        </li>
        <li>
            <p class="com">
                444
            </p>
        </li>
    </ul>
</p>

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;
}

The principle implemented here is: sub The level uses padding-left (the gap between elements) and

box-sizing:border-box, and the parent uses a negative margin-left value. This value is the same as the child's padding-left of. Adding p in li is just to make the effect obvious. Otherwise, if you add a background to li, due to the existence of box-sizing: border-box, li will seem to have no effect and are all connected together.

If you want to implement multiple columns such as 2 columns, 4 columns, 5 columns, etc., just modify the width of li (average distribution).

This method is compatible with IE8 and above browsers. Under IE7, the width of each li is about 2% less than normal, such as 3 columns. If displayed normally, the width of each li is 33.333%. , but it needs to be set to 31.333% under IE7 to display it basically normally. . . I haven’t gone into the specific reasons for this. I’ll make up for this when I have time later.

##HTML:

<p class="box3">
    <p class="header">圣杯布局(使用浮动)顶部</p>
    <p class="container">
        <p class="center">
            中间自适应宽度,注意这个center是在left的p前面
        </p>
        <p class="left">
            左部固定宽度
        </p>
        <p class="right">
            右部固定宽度
        </p>
    </p>
    <p class="footer">圣杯布局底部</p>
</p>

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;
}

The most important thing about the Holy Grail layout is the three p's juxtaposed in the middle, and the two p's above and below. I just used them to fill the numbers. . .

The implementation process is roughly as follows: 1. The order of the HTML placement of these three p's is particular. Center, the p displayed in the middle, is ranked first in the HTML, followed by left. , and finally right.

2. Before the container is not set with padding, the left p and the right p are not set with margin and relative positioning, all three ps are float: left. At this time, what is displayed on the page is that center occupies an exclusive line, then the left p, then the right p

3. Then the left p sets margin-left: -100%. In this way, left can jump from the second row to the leftmost side of the first row and cover the center p.

4. The right p sets margin-left: -130px; this value is the size of its own width. Then the right p also jumps to the rightmost side of the first row and covers the center p.

5. At this time, the container sets padding. The size of this padding is the width of the two p's left and right. Then the two p's left and right set the relative positioning respectively and move the distance of their own width. It displays normally.

This layout method is compatible with ie7, but has not been tested on ie6. . .

4. Imitation Holy Grail layout

## HTML:

<p class="box4">
    <p class="header">圣杯布局2(使用定位)顶部</p>
    <p class="container">
        <p class="left">
            左部固定宽度
        </p>
        <p class="center">
            中间自适应宽度，无需考虑顺序
        </p>
        <p class="right">
            右部固定宽度
        </p>
    </p>
    <p class="footer">圣杯布局2底部</p>
</p>

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;
}

The idea of ​​​​this method is: The same effect can be achieved by positioning the left and right sides absolutely, and then setting padding on the p in the middle. Don’t worry about the layout order of the three p’s in the middle, I always use this method.

Also compatible with ie7, ie6 has not been tested

5. Double flying wing layout

##HTML：

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

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;
}

The double-flying wing layout and the holy grail layout look similar, but the biggest difference is: in the double-flying wing layout, there is a p inside the middle p in the center. The purpose of layout is mainly achieved through the margin value of this p. Then there is no need to set relative positioning for the two p's left and right. Everything else is basically the same

Compatible with ie7, ie6 has not been tested.

There are also many multi-row and multi-column layout methods, such as CSS3's flex, inline-block, etc. . As long as you have ideas, no matter how difficult the layout is, you can achieve it.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About how to use matrices in css3

How to use CSS to rotate the icon by moving the mouse up Effect

The above is the detailed content of How to implement multi-row and multi-column layout using CSS. For more information, please follow other related articles on the PHP Chinese website!