Maison >interface Web >tutoriel CSS >Comment créer une mise en page stable à deux colonnes en HTML/CSS ?
Comment créer une mise en page stable à deux colonnes en HTML/CSS ?
- Linda Hamiltonoriginal
- 2024-11-20 18:41:17498parcourir
Création d'une mise en page stable à deux colonnes en HTML/CSS
Lors de la conception de pages Web, il est souvent nécessaire de créer une mise en page stable à deux colonnes mises en page. Cependant, réaliser cette disposition peut s'avérer difficile, en particulier lors du redimensionnement ou de l'application de bordures. Cet article explore une approche pour créer une mise en page stable à deux colonnes en HTML/CSS qui répond aux exigences suivantes :
-
Contraintes du conteneur :
- La largeur doit s'ajuster à 100 % de son élément parent.
- La hauteur s'ajuste pour contenir les deux colonnes.
- La taille minimale est égale au double de la largeur de la colonne de gauche.
-
Contraintes de colonne (générales) :
- Hauteur variable, s'ajustant au contenu.
- Alignement côte à côte, avec haut bords alignés.
- Résilient aux bordures, au remplissage ou aux marges appliqués à l'une ou l'autre des colonnes.
-
Contraintes de la colonne de gauche :
- Largeur fixe et absolue en pixels.
-
Contraintes de la colonne de droite :
- Remplit le reste espace dans le conteneur.
- La largeur est égale à la largeur du conteneur moins la largeur de la colonne de gauche.
-
Stabilité requise :
- Redimensionnable à des largeurs minimales ou plus grandes sans perturbation de la mise en page.
Solution :
Pour obtenir une mise en page stable à deux colonnes , nous pouvons exploiter la propriété float. Voici comment :
-
Définissez la colonne de gauche pour qu'elle flotte vers la gauche :
left { width: 200px; float: left; } -
Décalez la droite column :
#right { margin-left: 200px; } -
Effacer le float après les colonnes à l'aide d'un div :
<div class="clear"></div>
Cette solution permet aux deux colonnes de coexister sans interférer l'une avec l'autre. La colonne de gauche conserve sa largeur fixe, tandis que la colonne de droite remplit l'espace restant. Les bordures ou remplissages appliqués aux colonnes n'affecteront pas leur positionnement.
Exemple en direct :
<!DOCTYPE html>
<html>
<head>
<title>Cols</title>
<style>
#left {
width: 200px;
float: left;
}
#right {
margin-left: 200px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div>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!