The negative margin of CSS layout and other implementations

I believe everyone in the development of the project has encountered such requirements, a row of X (x>1) blocks and the spacing between adjacent blocks is the same.

This is probably the way it is, and here are some ways to do it.

1. Negative margin Dafa

Set the width of the element and leave the width of the parent full, and then set the margin-left of the parent to the width of the negative left white

CSS Code copy content to clipboard

<style type= "Text/css" >    *{    margin:0;    padding:0;   }   img{    vertical-align:middle;   }     ul>li{    float:left;   }     ul>li>img{    width:100%;   }       . test1{   padding:0 2%;   Margin-left: -3.3%;   }       . test1>li{   width:30%;   margin-left:3.3%;   }     </style>    <p>1. Regarding the implementation of negative margin, because margin is calculated based on the parent, there will be some deviations, but for the mobile end, the error can be ignored </p>           <ul class= "Test1 clearfix" >               <li></li> <li></li>               <li></li>           </ul>

The above error is because the UL margin and Li's margin calculation based on the element is not the same result, but on the mobile side because of the limited scope of the window, the difference is very small, on the PC generally use PX, so it can be ignored. (There are more options below)

2. The implementation of the major sites, within the elements of the filling, use box-sizing, need IE8 and above to support

css Code Copy content to clipboard

<style type= "Text/css" > *{margin:0;   padding:0;   } img{Vertical-align:middle;       }. test1{padding:0 2%;   Margin-left:-3.3%;   } ul>li{Float:left;       }. test1>li{width:30%;   margin-left:3.3%;   } ul>li>img{width:100%;       }. test2>li{width:33.3%;       Padding:0 2%;   Box-sizing:border-box;       }. test3{Display:flex;          Justify-content:space-between;       }. test3>li{width:31.3%;       Padding:0 2%;   Float:none;       }. test4{width:1200px;       border:1px solid red;   Margin-left:-3.33%;       }. test4>li{width:30%;   margin-left:3.33%; } </style> <p>2. The implementation of the major sites, within the elements of the filling, use box-sizing, need IE8 and above to support </p> <ul class= "Test2 Clearfi X "> <li></li> <li></li> < li></li> </ul> 

This implementation has not yet found any shortcomings, the code is also easy to understand (recommended)

3. Flexible box model flex implementation, need to do compatible processing (old box + new box)

CSS Code copy content to clipboard

<style type= "Text/css" > *{margin:0;   padding:0;   } img{Vertical-align:middle;       }. test1{padding:0 2%;   Margin-left:-3.3%;   } ul>li{Float:left;       }. test1>li{width:30%;   margin-left:3.3%;   } ul>li>img{width:100%;       }. test2>li{width:33.3%;       Padding:0 2%;   Box-sizing:border-box;       }. test3{Display:flex;          Justify-content:space-between;       }. test3>li{width:31.3%;       Padding:0 2%;   Float:none;       }. test4{width:1200px;       border:1px solid red;   Margin-left:-3.33%;       }. test4>li{width:30%;   margin-left:3.33%;               } </style> <p>3. Flexible box model flex implementation, need to do compatible processing (old box + new box), only for demo, not do compatible processing </p> <ul class= "Test3" > <li></li> <li>&lt ;/li> <li>< img src= "img/test.jpg"/></li> </ul> 

How could this be the case without US flex, the elastic box model should be designed to handle this situation, but there are new and old box models, each browser implementation is not the same. So in general, the properties of both sets of box models need to be added. (like toss on it, the effect of the stick)

4.classname implementations

Add a separate class for the elements that require special handling, and then do the appropriate processing. Can be processed in the background or front-end processing (recommended background processing)

CSS Code copy content to clipboard

<style type= "Text/css" > *{margin:0;   padding:0;   } img{Vertical-align:middle;       }. test1{padding:0 2%;   Margin-left:-3.3%;   } ul>li{Float:left;       }. test1>li{width:30%;   margin-left:3.3%;   } ul>li>img{width:100%;       }. test2>li{width:33.3%;       Padding:0 2%;   Box-sizing:border-box;       }. test3{Display:flex;          Justify-content:space-between;       }. test3>li{width:31.3%;       Padding:0 2%;   Float:none;   }. test4{padding:0 2%;       }. test4>li{width:30%;   margin-left:5%;   }. test4>li.first{margin:0;   }. test5{padding:0 2%;       }. test5>li{width:30%;   margin-left:5%;   }. test5>li:first-child{margin:0; } </style> <p>4.classname Implementation </p> <ul class= "test4 clearfix" > <li CLA ss= "First" ></li> <li></li> <li>&lt ; img src= "img/test.jpg"/></li> </ul>

5.CSS Selector Implementation

: First-child:first-type-of:nth-child () These implementations have no technical difficulties, you can consult the CSS document, note that compatibility is no problem

CSS Code copy content to clipboard

<style type= "Text/css" > *{margin:0;   padding:0;   } img{Vertical-align:middle;       }. test1{padding:0 2%;   Margin-left:-3.3%;   } ul>li{Float:left;       }. test1>li{width:30%;   margin-left:3.3%;   } ul>li>img{width:100%;       }. test2>li{width:33.3%;       Padding:0 2%;   Box-sizing:border-box;       }. test3{Display:flex;          Justify-content:space-between;       }. test3>li{width:31.3%;       Padding:0 2%;   Float:none;   }. test4{padding:0 2%;       }. test4>li{width:30%;   margin-left:5%;   }. test4>li.first{margin:0;   }. test5{padding:0 2%;       }. test5>li{width:30%;   margin-left:5%;   }. test5>li:first-child{margin:0; } </style> <p>5.css Selector implementation (note IE compatibility) </p> <ul class= "Test5 clearfix" > < Li></li> <li></li> <li></li> </ul>

Put all the demos on.

I almost forgot. There is also a situation when x=2, set the width, left to float, right to float.

In fact, there is a way to deal with the x=3, left and right elements floating around, the middle element relative to the parent set absolute positioning, centered positioning.

Note that due to the inability to divide the reason, not as box-sizing as the perfect calculation, but the rational application of the project is absolutely no problem.

The above is the whole content of this article, I hope that everyone's learning has helped, but also hope that we support topic.alibabacloud.com.