On how CSS implements multi-row and multi-column layouts

This article mainly introduces the CSS implementation of multi-row multi-column layout of the instance code, the need for friends can refer to the following

1. Two columns in multiple rows:

Html:

<p class= "Box1" >    box1: Implementing two-column multi-line layouts    <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 nth-child（） is used, compatible with IE9 and above the browser, the middle of the gap is two side of the sum of p width, 100% minus the remaining width;

Now that you mention it, it's a nth-child（） nth-of-type（） browser that is compatible with IE9 and above. It differs from nth-child the following:

<p class= "box" >    

If you want the second P tag background to be red, then p:nth-child (4) will achieve the effect, and P:nth-of-type (2) will do it. So nth-of-type no matter how much content is in front of the p tag, only the second element of P is recognized. And Nth-child is looking for the first element of its parent. In this case, the advantages of nth-of-type are reflected.

2. Multi-row Multi-column


Html:


<p class= "Box2" >    Box2: Multiline multi-column    <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 here is that the child uses Padding-left (the gap between elements) and box-sizing:border-box that the parent uses the Margin-left negative value, which padding-left is the same as the child. Li inside add p just to let the effect is obvious, otherwise to Li plus background, because box-sizing：border-box of the existence, Li seems to have no effect all linked together.

If you want to implement more than 2 columns, 4 columns, 5 columns, and so on, just modify the width of the Li (evenly distributed) on the line.

This practice is compatible with IE8 and above browser, under IE7, each Li width is about 2% less than normal, such as 3 columns, the normal display, each Li width is 33.333%, but IE7 need to set 31.333%, in order to basically normal display ... This specific reason did not drill down, there is time to come back to mend this pit xxx

3. Grail layout:


Html:


<p class= "Box3" >    <p class= "header" > Holy Grail Layout (using floating) Top </p>    <p class= "container" >        <p class= "center" >            Middle Adaptive width, note that this center is in front of left P        </p>        <p class= "Ieft" >            fixed width        </p>        <p class= "Right" > left            fixed width        </p>    </p>    <p class= " Footer "> Holy Grail Layout Bottom </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 of the Grail layout is the middle side of the 3 p, the top and bottom two P, I just bring to sucks ...

The implementation process is roughly as follows: 1. The order of the HTML placement of the three P is fastidious, the center of the display in the middle of the P, in the HTML is the first, then left, and finally right.

2. In container not set padding,left this p and right this p neither set margin and relative positioning relative before, three p are float:left. This time the page shows the center exclusive line, then the left P, and then the P

3. Then left this p is set margin-left:-100%. So left can jump from the second row to the leftmost side of the first row and cover the center of the P.

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

5. This time container set padding, the size of this padding is left and right the width of the two p respectively, and then right and left the two P respectively set relative positioning, moving their width distance, normal display.

This layout is IE7 compatible, IE6 has not been tested ...

4. Imitation Grail layout


Html:


<p class= "Box4" >    <p class= "header" > Holy Grail Layout 2 (using positioning) Top </p>    <p class= "container" >        <p class=            left > Fixed width        </p>        <p class= "center" >            Middle Adaptive width, no need to consider order        </p>        <p class= "Right" >            fixed width        </p>    </p>    <p class= "Footer" > Holy Grail layout 2 Bottom < /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;}

This way of thinking is: the left and right sides of the absolute positioning, and then the middle of the P set padding, can achieve the same effect. I don't have to worry about the layout of the three p in the middle, I've been using it this way.

Also compatible with IE7,IE6 not tested

5. Double Wing layout


Html:


<p class= "Box5" >    <p class= "header" > Double Wing layout top </p>    <p class= "container" >        <p class= "center" >            <p class= "center-in" >                middle Adaptive width, note that this center is in front of left P            </p>        </p >        <p class= "left" >            fixed-width on top        </p>        <p class= "Right" >            fixed width        </p >    </p>    <p class= "Footer" > Double Wing Layout bottom </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 two-wing layout and the Grail layout look the same, but the biggest difference is that this p in the middle of the center of the double-wing layout has a p in it, mainly through the margin value of the p to achieve the purpose of the layout. Then the left and right two p no longer set relative positioning relative. Everything else is basically the same.

Compatible IE7,IE6 has not been tested.

There are many more rows and columns of layout, such as CSS3 Flex,inline-block and so on. As long as there are ideas, the layout can be difficult to achieve.

 The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!