Méthode CSS pour implémenter la disposition des colonnes horizontales-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

Méthode CSS pour implémenter la disposition des colonnes horizontales

Aug 05, 2017 pm 01:07 PM

css 布局

1. Comment utiliser float pour implémenter la disposition horizontale des colonnes

Comme indiqué ci-dessous : p1 et p2 peuvent choisir de flotter à 50 % vers la gauche ou la droite pour s'afficher dans la même ligne.

Analyse :

1. Les marges gauche et droite de la première image et la dernière image de la première. la ligne mesure 10 px, les marges gauche et droite de l’image du milieu sont de 5 px. La disposition est la suivante :

tbody> 2. Dans la deuxième ligne, seule l'image du milieu a une marge maximale de 5px ; la disposition est la suivante :

 &lt;section class=&quot;active_p1&quot;&gt;
        &lt;p&gt;
            &lt;img id=&quot;active_p11&quot; src=&quot;&quot;&gt;
        &lt;/p&gt;
        &lt;p&gt;
            &lt;img id=&quot;active_p12&quot; src=&quot;&quot;&gt;
        &lt;/p&gt;
        &lt;p&gt;
            &lt;img id=&quot;active_p13&quot; src=&quot;&quot;&gt;
        &lt;/p&gt;
    &lt;/section&gt;

Copier après la connexion

.active_p1 p {
    float: left;
    width: 33.33%;
    box-sizing: border-box;
}
 .active_p1 p:nth-child(1) {
    padding-left: 10px;
}
 .active_p1 p:nth-child(3) {
    padding-right: 10px;
}
 .active_p1 p:nth-child(2) {
    padding: 0 5px;
}

Copier après la connexion

&lt;section class=&quot;active_p2&quot;&gt;
        &lt;p&gt;
            &lt;img id=&quot;active_p21&quot; src=&quot;&quot; onclick=&quot;imgClick(this)&quot;&gt;
        &lt;/p&gt;
        &lt;p&gt;
            &lt;img id=&quot;active_p22&quot; src=&quot;&quot; onclick=&quot;imgClick(this)&quot;&gt;
        &lt;/p&gt;
        &lt;p&gt;
            &lt;img id=&quot;active_p23&quot; src=&quot;&quot; onclick=&quot;imgClick(this)&quot;&gt;
        &lt;/p&gt;
    &lt;/section&gt;

Copier après la connexion

.active_p2 p {
    width: 33.33%;
    float: left;
    box-sizing: border-box;
}
 .active_p2 p:nth-child(2) {
    padding: 0px 5px;
}

Copier après la connexion

&lt;header id=&quot;consume_h&quot;&gt;
       &lt;span&gt;已过期为消费不退款&lt;/span&gt;
        &lt;span&gt;免预约&lt;/span&gt;&lt;/header&gt;

Copier après la connexion

.consume_h  span {
    display: inline-block;
}
 .consume_h  span:before {
    content: "\f120";
    display: inline-block;
    margin-right: 5px;
    margin-left: 10px;
    font-family: "Ionicons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

Copier après la connexion

Remarque : Si ce n'est pas après en utilisant box-sizing : border-box Dans d'autres styles, tous les blocs seront collés ensemble sans aucun espace entre les deux.

2. Utilisez display:inline-block

display:inline-block est principalement utilisé pour la conversion de blocs de lignes. Il n'est pas recommandé d'utiliser cet attribut. . Disposition des colonnes. Parce que inline-block ne peut pas remplacer complètement float

La mise en page dans la case rouge est la mise en page la plus classique utilisant display:inline-block.

&lt;p&gt;
            &lt;img src=&quot;&quot; alt=&quot;&quot;&gt;
            &lt;p&gt;
    测试勿拍            &lt;/p&gt; &lt;/p&gt;

Copier après la connexion

Les pseudo-classes sont utilisées ici. La définition et l'utilisation des pseudo-classes ne seront pas introduites ici.

Celui-ci a également une mise en page classique :

Cette mise en page est généralement : Utilisation de position:absolute est souvent utilisée lorsque le côté gauche est fixe et le côté droit est adaptatif. Positionnement relatif de pPositionnement absolu de imgPositionnement relatif de p 3. Utilisez une boîte flexible pour obtenir une mise en page vraiment fluide

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!

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