Utilisation magique de la marge négative dans la mise en page CSS et autres implémentations

Je pense que tout le monde a rencontré un tel besoin lors du développement du projet. X (X>1) blocs doivent être placés sur une rangée et l'espacement entre les blocs adjacents doit être le même.

Cela ressemble probablement à ce qui précède. Voici quelques méthodes de mise en œuvre.

1. Méthode de marge négative

Définissez la largeur et la marge de l'élément pour remplir la largeur du parent, puis définissez la marge gauche du parent sur margin Largeur d'espacement négative

Code CSSCopier le contenu dans le presse-papiers

<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="img/test.jpg"/ alt="Utilisation magique de la marge négative dans la mise en page CSS et autres implémentations" ></li>   
            <li><img  src="img/test.jpg"/ alt="Utilisation magique de la marge négative dans la mise en page CSS et autres implémentations" ></li>   
            <li><img  src="img/test.jpg"/ alt="Utilisation magique de la marge négative dans la mise en page CSS et autres implémentations" ></li>   
        </ul>

L'erreur ci-dessus est causée par le calcul du pourcentage de marge de ul et li basé sur différents éléments. Cependant, sur le terminal mobile, en raison de la portée limitée de la fenêtre, la différence est généralement très faible. , sur le PC, utilisez px pour qu'il puisse être ignoré. (Il y a d'autres moyens ci-dessous)

2. Pour la mise en œuvre de sites Web majeurs, remplissez les éléments et utilisez le dimensionnement de la boîte. Il nécessite ie8 et supérieur pour prendre en charge

Code CSSCopier le contenu dans le presse-papiers

<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="img/test.jpg"/ alt="Utilisation magique de la marge négative dans la mise en page CSS et autres implémentations" ></li>   
            <li><img  src="img/test.jpg"/ alt="Utilisation magique de la marge négative dans la mise en page CSS et autres implémentations" ></li>   
            <li><img  src="img/test.jpg"/ alt="Utilisation magique de la marge négative dans la mise en page CSS et autres implémentations" ></li>   
        </ul>

Cette implémentation est toujours disponible pour le pour le moment, aucune lacune n'a été trouvée et le code est simple et facile à comprendre (recommandé)

3 La mise en œuvre du modèle de boîte flexible flex nécessite un traitement de compatibilité (ancienne boîte, nouvelle boîte)

Code CSS

Copier le contenu dans le presse-papiers

<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="img/test.jpg"/ alt="Utilisation magique de la marge négative dans la mise en page CSS et autres implémentations" ></li>   
            <li><img  src="img/test.jpg"/ alt="Utilisation magique de la marge négative dans la mise en page CSS et autres implémentations" ></li>   
            <li><img  src="img/test.jpg"/ alt="Utilisation magique de la marge négative dans la mise en page CSS et autres implémentations" ></li>   
        </ul>

Comment cette situation peut-elle être moins courante ? Quant à notre flex, le modèle de boîte flexible devrait être spécialement conçu pour gérer cette situation, mais il existe de nouveaux et d'anciens modèles de boîte, et chaque navigateur l'implémente différemment. Par conséquent, en général, les attributs des deux ensembles de modèles de boîtes doivent être ajoutés. (Faites-le si vous le souhaitez, l'effet est génial)

Implémentation de 4.classname

Ajoutez une classe distincte aux éléments qui nécessitent un traitement spécial, puis faites l'adresse correspondante. Il peut être traité en arrière-plan ou en front-end (le traitement backend est recommandé)

Code CSS

Copier le contenu dans le presse-papiers

<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="img/test.jpg"/ alt="Utilisation magique de la marge négative dans la mise en page CSS et autres implémentations" ></li>   
            <li><img  src="img/test.jpg"/ alt="Utilisation magique de la marge négative dans la mise en page CSS et autres implémentations" ></li>   
            <li><img  src="img/test.jpg"/ alt="Utilisation magique de la marge négative dans la mise en page CSS et autres implémentations" ></li>   
        </ul>

Implémentation du sélecteur 5.css

:first-child :first-type-of :nth-child() Aucun de ces implémentations S'il y a des difficultés techniques, vous pouvez vérifier le document CSS et faire attention à la compatibilité

Code CSS

Copie. le contenu dans le presse-papiers

<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="img/test.jpg"/ alt="Utilisation magique de la marge négative dans la mise en page CSS et autres implémentations" ></li>   
            <li><img  src="img/test.jpg"/ alt="Utilisation magique de la marge négative dans la mise en page CSS et autres implémentations" ></li>   
            <li><img  src="img/test.jpg"/ alt="Utilisation magique de la marge négative dans la mise en page CSS et autres implémentations" ></li>   
        </ul>

Collez toute la DÉMO

J'ai presque oublié qu'il y a une autre situation où X=2, définissez la largeur, flottez à gauche à gauche et flottez à droite Flottez à droite.

En fait, lorsque X=3, il existe une autre façon de gérer cela. Les éléments gauche et droit flottent respectivement à gauche et à droite, et l'élément du milieu est défini pour être absolument positionné et centré par rapport au parent. .

Notez qu'en raison de l'indivisibilité, il ne peut pas être calculé aussi parfaitement que le dimensionnement d'une boîte, mais une application raisonnable ne posera aucun problème dans le projet.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour des utilisations plus magiques des marges négatives dans la mise en page CSS et d'autres articles liés à l'implémentation, veuillez prêter attention au site Web PHP chinois !