Magical use of negative margin in css layout and other implementations

I believe everyone has encountered such a need in project development. X (X>1) blocks should be placed in one row and the spacing between adjacent blocks should be the same.

It probably looks like the above. Here are several ways to implement it.

1. Negative margin method

Set the width and margin of the element to fill the width of the parent, and then set the margin-left of the parent to be blank The width of negative white space

CSS CodeCopy 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.关于负margin的实现，由于margin是基于父级计算的，会有一定的偏差，但是用于移动端上，误差可以忽略不计</p>   
        <ul class="test1 clearfix">   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magical use of negative margin in css layout and other implementations" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magical use of negative margin in css layout and other implementations" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magical use of negative margin in css layout and other implementations" ></li>   
        </ul>

The above error is caused by the calculation of the margin percentage of ul and li based on different elements. However, on the mobile terminal, due to the limited range of the window, the difference is very small. On PC, px is generally used. , so it can be ignored. (There are more ways below)

2. For the implementation of major websites, fill in the elements and use box-sizing. It requires ie8 and above to support

CSS CodeCopy content to the 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.各大网站的实现，在元素内部进行填充,使用box-sizing，需要ie8及以上才支持</p>   
        <ul class="test2 clearfix">   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magical use of negative margin in css layout and other implementations" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magical use of negative margin in css layout and other implementations" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magical use of negative margin in css layout and other implementations" ></li>   
        </ul>

This implementation has not been found yet What are the shortcomings? The code is simple and easy to understand (recommended)

3. The implementation of the flexible box model flex requires compatibility processing (old box + new box)

CSS CodeCopy 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.弹性盒模型flex的实现，需要做兼容处理（旧盒子+新盒子），仅为演示，没做兼容处理</p>   
        <ul class="test3">   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magical use of negative margin in css layout and other implementations" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magical use of negative margin in css layout and other implementations" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magical use of negative margin in css layout and other implementations" ></li>   
        </ul>

How can we do without flex in this situation? , the flexible box model should be specially designed to handle this situation, but there are old and new box models, and each browser implements them differently. Therefore, in general, the attributes of both sets of box models need to be added. (Just do it if you like, the effect is great)

4.classname implementation

Add a separate class to the elements that need special processing, and then do the corresponding deal with. It can be processed in the background or front-end (backend processing is recommended)

CSS CodeCopy content to the 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实现</p>   
        <ul class="test4 clearfix">   
            <li class="first"><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magical use of negative margin in css layout and other implementations" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magical use of negative margin in css layout and other implementations" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magical use of negative margin in css layout and other implementations" ></li>   
        </ul>

5.css selector implementation

:first-child :first-type-of :nth-child() There is no technology in these implementations Difficulty, you can check the css document and pay attention to the compatibility.

##CSS CodeCopy the content to the 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选择器实现(注意ie兼容性)</p>   
        <ul class="test5 clearfix">   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magical use of negative margin in css layout and other implementations" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magical use of negative margin in css layout and other implementations" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magical use of negative margin in css layout and other implementations" ></li>   
        </ul>

Paste all the DEMO

I almost forgot that there is another situation when X=2, set the width, float left on the left and float right on the right.

In fact, when X=3, there is another way to deal with it. The left and right elements float left and right respectively, and the middle element is set to be absolutely positioned and centered relative to the parent.

Note that due to the indivisibility, it cannot be calculated as perfectly as box-sizing, but reasonable application is no problem at all in the project.

The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.

Please pay attention to the PHP Chinese website for more wonderful uses of negative margins in css layout and other implementation-related articles!