Maison > interface Web > tutoriel CSS > Implémentation de la mise en page aux deux extrémités de la mise en page CSS

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

Guanhui
Libérer: 2020-06-28 18:06:21
avant
2758 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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

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

Enfin, résumez la formule

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

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!

Étiquettes associées:
css
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal