Partager un résumé de la façon d'implémenter la mise en page CSS à deux colonnes

Cet article présente principalement un résumé de la mise en œuvre de la mise en page CSS à deux colonnes et discute de certaines pratiques et problèmes, notamment la marge absolue et la marge flottante. Les amis dans le besoin peuvent s'y référer

La mise en page à deux colonnes est. probablement la méthode de mise en page Web la plus classique, ce blog utilise cette mise en page. Dans une disposition à deux colonnes, il est plus courant que la colonne principale (main) ait une largeur adaptative et que la sous-colonne (barre latérale) ait une largeur fixe.
Aujourd'hui, discutons de la façon de mettre en œuvre cette mise en page adaptative à deux colonnes à largeur fixe.

1. Méthode de marge absolue

La première chose qui me vient à l'esprit est la méthode de marge absolue. Jetons d'abord un coup d'œil au code :

<p class="container">
    <p class="sidebar">子列</p>
    <p class="main">主列</p>
</p>

.container {   
 position: relative;   
}   
.sidebar {   
 position: absolute;   
 top: 0;   
 left: 0;   
 width: 200px;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.main {   
 height: 300px;   
 margin-left: 210px;   
 background-color: rgba(0, 255, 0, .5);   
}

Cette méthode utilise la position pour séparer la colonne de la barre latérale du flux de documents, puis supprime la partie couverte par la barre latérale. colonne à travers la marge gauche de la colonne principale. De cette manière, nous avons obtenu une disposition adaptative à deux colonnes à largeur fixe.

(1) Ajustement de l'ordre des colonnes

Sans modifier le HTML, il suffit de modifier simplement le CSS, on peut interchanger l'ordre des colonnes gauche et droite, voir Code :

.sidebar {   
 position: absolute;   
 top: 0;   
 rightright: 0;   
}   
.main {   
 margin-right: 210px;   
}

(2) La colonne de contenu principale est affichée en premier

Pensons plus parfaitement, pouvons-nous mettre la colonne principale Mettre le devant la colonne de la barre latérale afin que le contenu principal soit chargé et rendu en premier ? Essayons !

<p class="container">
    <p class="main">主列</p>
 <p class="sidebar">子列</p>
</p>

Effectuez simplement les ajustements simples ci-dessus, aucune modification CSS n'est requise !

(3) Le problème

Bien que cette méthode présente de nombreux avantages, elle présente un inconvénient fatal. Étant donné que la colonne de la barre latérale est séparée du flux de documents, lorsque la colonne de la barre latérale est plus haute que la colonne principale, elle couvrira la mise en page suivante : démonstration du problème.
Si vous ajoutez overflow:hidden au conteneur conteneur, la partie débordement de la barre latérale sera coupée. Dans cette configuration, il n’existe vraiment aucune solution efficace à ce problème.

2. Méthode de marge flottante

Ensuite, ce qui me vient à l'esprit est la marge flottante pour implémenter une mise en page à deux colonnes. Tout d'abord, implémentez une mise en page à deux colonnes avec une mise en page fixe. largeur de la colonne de gauche et contenu principal adaptatif. Le code est le suivant :

<p class="sidebar">子列</p>
<p class="main">主列</p>

.sidebar {   
 float: left;   
 width: 200px;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.main {   
 height: 300px;   
 margin-left: 210px;   
 background-color: rgba(0, 255, 0, .5);   
}

Cette implémentation est relativement simple. Faites d'abord flotter la sous-colonne vers la gauche, puis définissez la marge gauche sur la colonne principale. pour laisser de la place à la sous-colonne. Affichez simplement l'espace.

Alors, cette méthode prend-elle en charge l'échange de positions de colonnes ? bien sûr. Le code CSS est le suivant :

.sidebar {   
 float: rightright;   
 width: 200px;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.main {   
 height: 300px;   
 margin-right: 210px;   
 background-color: rgba(0, 255, 0, .5);   
}

Le problème :

Il semble que la méthode float margin soit une bonne solution, mais la colonne principale que nous avons mentionnée plus tôt s'affiche en premier. L'optimisation ne peut pas être réalisée.

3. Méthode de marge négative flottante

Sans plus tarder, passons directement au code :

<p class="main-wrapper">
    <p class="main">主列</p>
</p>
<p class="sidebar">子列</p>

.main-wrapper {   
 float: left;   
 width: 100%;   
}   
.main {   
 height: 100px;   
 margin-left: 210px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.sidebar {   
 float: left;   
 width: 200px;   
 height: 100px;   
 margin-left: -100%;   
 background-color: rgba(0, 255, 0, .5);   
}

Tout le monde aurait dû remarquer qu'il s'agit d'une disposition à double aile et que la colonne principale est affichée en premier. Le processus de mise en œuvre est le suivant :

Faites d'abord flotter la colonne principale et la colonne de la barre latérale, puis positionnez correctement la colonne de la barre latérale via une marge négative.
Imbibez la colonne principale dans un p et définissez la valeur de largeur de p sur 100 %.
Enfin, définissez la marge gauche de la colonne principale pour éliminer la partie couverte par la barre latérale.

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!