Css layout: negative margin and Other implementations; css layout: margin

Css layout: negative margin and Other implementations; css layout: margin

I believe that you have encountered this kind of requirement in project development. One row is placed with X (X> 1) blocks and the spacing between adjacent blocks is the same.

This is probably the above. The following describes several implementation methods.

1. Negative margin Method

Set the element width and remaining white to the parent width, and set the parent-level margin-left to the width of the remaining negative white.

<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. for the implementation of negative margin, because margin is calculated based on the parent level, there will be some deviations, but it is used on mobile terminals, the error is negligible. </p> <ul class = "test1 clearfix"> <li>  </li>  </li>  </li> </ul>

The above error is caused by the different elements calculated based on the percentage of ul's margin and li's margin, but the difference is very small on the mobile terminal because of the limited window range, px is generally used on a pc, so it is negligible. (More methods are available below)

2. implement various websites and fill in the elements. Use box-sizing, which can be supported only by ie8 or later.

<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-;}. test3> li {width: 31.3%; padding: 0 2%; float: none ;}. test4 {width: pixel PX; border: 1px solid red; margin-left:-3.33% ;}. test4> li {width: 30%; margin-left: 3.33% ;}</style> <p> 2. the implementation of various websites is filled in the element, using box-sizing, </p> <ul class = "test2 clearfix"> <li>  </li> <li>  </li>  </li> </ul>

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

3. Compatibility with the implementation of the flexible box model flex (old box + new box)

<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-;}. test3> li {width: 31.3%; padding: 0 2%; float: none ;}. test4 {width: pixel PX; border: 1px solid red; margin-left:-3.33% ;}. test4> li {width: 30%; margin-left: 3.33% ;}</style> <p> 3. the implementation of the flexible box model flex requires compatibility processing (old box + new box), only for demonstration, no compatibility processing </p> <ul class = "test3"> <li>  </li>  </li>  </li> </ul>

In this case, how can we lose flex? The elastic box model should be used to deal with this situation, but there are new and old box models, and the implementation of different browsers is not the same. Therefore, attributes of the two box models must be added. (If you like to toss it up, the effect is superb)

4. classname implementation

Add a separate class to the elements that require special processing, and then perform corresponding processing. Can be processed in the background or in the frontend (recommended in the background)

<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-;}. 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 class = "first">  </li> <li>  </li>  </li> </ul>

5.css selector implementation

: First-child: first-type-of: nth-child () These implementations have no technical difficulties. You can refer to the css document and pay attention to compatibility issues.

<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-;}. 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> </ul>

Paste all the demos

I almost forgot another case. When X = 2, set the width, left floating, and right floating.

In fact, when X = 3, there is also a processing method, with the left and right elements floating around separately. The middle element sets absolute positioning and center Positioning Relative to the parent level.

Note:,Because the Division is not possible, the computation cannot be as perfect as box-sizing, but the rational application is no problem in the project.

My personal thoughts are limited after all. If you have any other solutions, leave a message.