Implémentation de la mise en page aux deux extrémités de la mise en page CSS

Récemment, au cours du processus de développement, j'ai rencontré une mise en page alignée aux deux extrémités. Elle est disposée en fonction de pourcentages. J'ai déjà utilisé la mise en page flexible, mais la mise en page flexible utilise les deux extrémités. . Lors de la mise en page, tous les bugs apparaîtront. Par exemple, lorsque ce qui suit est généré dynamiquement, trois colonnes ou plus distribueront la liste suivante des deux côtés.
Bien que cela puisse être résolu, je veux toujours voir comment il est présenté en utilisant du CSS ordinaire. Parce que j'ai écrit ceci.

J'ai trouvé des tutoriels sur Internet, et ils fonctionnent tous avec des largeurs codées en dur. Je l'ai changé en format de pourcentage et je l'ai enregistré simplement.
Ajoutez d'abord du CSS

<style>
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        
        .max-box {
            max-width: 1200px;
            margin: 0px auto;
        }
        
        .box {
            overflow: hidden;
            width: calc(100% + 20px);
            margin-left: -10px;
        }
        
        .inner {
            height: 100px;
            border: solid 1px red;
            float: left;
            margin-left: 10px;
            width: calc(((100% - 20px) - 10px * 3) / 4);
        }
        
        .max-box2 {
            max-width: 1200px;
            margin: 50px auto;
            border: solid 1px red;
            height: 200px;
        }
    </style>

puis ajoutez du html

 <p class="max-box2">

    </p>
    <p class="max-box">
        <p class="box">
            <p class="inner">

            </p>
            <p class="inner">

            </p>
            <p class="inner">

            </p>
            <p class="inner">

            </p>
        </p>
    </p>

Mettez-les en HTML et vous pourrez voir l'effet.
Comme indiqué ci-dessous

Enfin, résumez la formule

x = 10px; 即：想要的间距
y = 4     即：想要排列的个数
父级：  width: calc(100% + (x * 2));
子级：  width: calc(((100% - (x * 2)) - x * ( y - 1)) / y );

Tutoriel recommandé : "Tutoriel CSS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!