Magische Verwendung eines negativen Randes im CSS-Layout und anderen Implementierungen

Ich glaube, dass jeder während der Projektentwicklung auf einen solchen Bedarf gestoßen ist. X (X>1) Blöcke sollten in einer Reihe platziert werden und der Abstand zwischen benachbarten Blöcken sollte gleich sein.

Es sieht wahrscheinlich wie oben aus.

1. Methode mit negativem Rand

Stellen Sie die Breite und den Rand des Elements so ein, dass sie die Breite des übergeordneten Elements ausfüllen, und stellen Sie dann den linken Rand des übergeordneten Elements auf ein margin Negative Leerraumbreite

CSS-CodeInhalt in die Zwischenablage kopieren

<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="Magische Verwendung eines negativen Randes im CSS-Layout und anderen Implementierungen" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magische Verwendung eines negativen Randes im CSS-Layout und anderen Implementierungen" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magische Verwendung eines negativen Randes im CSS-Layout und anderen Implementierungen" ></li>   
        </ul>

Der obige Fehler wird durch die Berechnung des Margin-Prozentsatzes von ul und li auf der Grundlage unterschiedlicher Elemente verursacht. Auf dem mobilen Endgerät ist der Unterschied jedoch aufgrund des begrenzten Umfangs des Fensters sehr gering , auf dem PC Verwenden Sie px, damit es ignoriert werden kann. (Weitere Möglichkeiten finden Sie unten)

2. Füllen Sie für die Implementierung wichtiger Websites die Elemente aus und verwenden Sie die Box-Größe, die zur Unterstützung IE8 und höher erfordert

CSS-CodeInhalt in die Zwischenablage kopieren

<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="Magische Verwendung eines negativen Randes im CSS-Layout und anderen Implementierungen" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magische Verwendung eines negativen Randes im CSS-Layout und anderen Implementierungen" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magische Verwendung eines negativen Randes im CSS-Layout und anderen Implementierungen" ></li>   
        </ul>

Diese Implementierung ist weiterhin für verfügbar Derzeit wurden keine Mängel festgestellt und der Code ist einfach und leicht zu verstehen (empfohlen)

3. Die Implementierung des flexiblen Boxmodells Flex erfordert eine Kompatibilitätsverarbeitung (alte Box + neue Box)

CSS-CodeInhalt in die Zwischenablage kopieren

<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="Magische Verwendung eines negativen Randes im CSS-Layout und anderen Implementierungen" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magische Verwendung eines negativen Randes im CSS-Layout und anderen Implementierungen" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magische Verwendung eines negativen Randes im CSS-Layout und anderen Implementierungen" ></li>   
        </ul>

Wie Kann das seltener passieren? Was unseren Flex betrifft, sollte das flexible Box-Modell speziell für diese Situation entwickelt werden, aber es gibt alte und neue Box-Modelle und jeder Browser implementiert es anders. Daher müssen im Allgemeinen die Attribute beider Sätze von Boxmodellen hinzugefügt werden. (Machen Sie es einfach, wenn Sie möchten, der Effekt ist großartig)

4.Klassenname-Implementierung

Fügen Sie den Elementen, die eine spezielle Verarbeitung erfordern, eine separate Klasse hinzu und führen Sie dies dann aus den entsprechenden Deal mit. Die Verarbeitung kann im Hintergrund oder im Frontend erfolgen (Backend-Verarbeitung wird empfohlen)

CSS-CodeInhalt in die Zwischenablage kopieren

<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="Magische Verwendung eines negativen Randes im CSS-Layout und anderen Implementierungen" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magische Verwendung eines negativen Randes im CSS-Layout und anderen Implementierungen" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magische Verwendung eines negativen Randes im CSS-Layout und anderen Implementierungen" ></li>   
        </ul>

5.css-Selektorimplementierung

:first-child :first-type-of :nth-child() Keine Wenn es technische Schwierigkeiten gibt, können Sie das CSS-Dokument überprüfen und auf die Kompatibilität achten.

CSS-Code den Inhalt in die Zwischenablage

<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="Magische Verwendung eines negativen Randes im CSS-Layout und anderen Implementierungen" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magische Verwendung eines negativen Randes im CSS-Layout und anderen Implementierungen" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="Magische Verwendung eines negativen Randes im CSS-Layout und anderen Implementierungen" ></li>   
        </ul>

Alle DEMO einfügen

Ich habe fast vergessen, dass es eine andere Situation gibt, wenn X=2, die Breite festlegen, links nach links schweben und rechts schweben. Nach rechts schweben.

Tatsächlich gibt es bei X=3 eine andere Möglichkeit, damit umzugehen. Das linke und das rechte Element schweben jeweils nach links und rechts, und das mittlere Element ist so eingestellt, dass es relativ zum übergeordneten Element absolut positioniert und zentriert ist .

Beachten Sie, dass es aufgrund der Unteilbarkeit nicht so perfekt berechnet werden kann wie die Kastengröße, eine sinnvolle Anwendung im Projekt jedoch kein Problem darstellt.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Ich hoffe auch, dass jeder die PHP-Chinesisch-Website unterstützt.

Weitere magische Anwendungen des negativen Randes im CSS-Layout und andere Artikel zur Implementierung finden Sie auf der chinesischen PHP-Website!