Comment faire une mise en page stable à deux colonnes dans HTML / CSS
je veux un récipient avec deux colonnes. Détails:
Le conteneur
- Largeur doit s'ajuster à 100% de son élément parent (facilement accompli).
- Hauteur doit s'adapter à contenir à la fois des colonnes (c'est à dire sa hauteur doit être exactement égale à la plus grande hauteur des deux colonnes, donc il n'y a pas de débordement et les barres de défilement ne jamais afficher)
- doit avoir une taille minimale égale au double de la largeur de la colonne de gauche.
La colonnes en général
- Doit être de hauteur variable, réglage de la hauteur de leur contenu.
- doivent être côte à côte, de sorte que leurs bords supérieurs soient alignés.
- ne devraient pas briser la mise en page ou envelopper l'un sous l'autre si même un seul pixel de bordure, de rembourrage, ou de marge est appliqué à l'un ou l'autre, parce que ce serait extrêmement instable et malheureux.
La colonne de gauche spécifiquement
- Doit avoir un fixe, largeur absolue en unités de pixels.
La colonne de droite spécifiquement
- Largeur doit remplir l'espace restant dans le récipient. En d'autres termes...
- largeur doit être égale à la largeur du conteneur moins la largeur de la colonne de gauche, de sorte que si je place un élément de bloc DIV à l'intérieur de cette colonne, mettre sa largeur à 100%, lui donner une hauteur de quelque chose comme 10px, et lui donner une couleur de fond, je vais voir une bande de haute couleur 10px qui va du bord droit de la colonne de gauche au bord droit du conteneur (c'est-à-dire qu'elle remplit la largeur de la colonne de droite).
stabilité
le conteneur doit être capable de redimensionner (en redimensionnant la fenêtre du navigateur) jusqu'à sa largeur minimale (spécifiée plus haut) ou jusqu'à une largeur beaucoup plus grande sans casser la disposition. "Casser" inclurait le changement de taille de la colonne de gauche (rappelez-vous qu'elle est supposée avoir une largeur de pixel fixe), la colonne de droite enveloppant sous la gauche, les barres de défilement apparaissant, bloquent les éléments de la colonne de droite qui ne prennent pas toute la largeur de la colonne et, en général, toute spécification mentionnée ci-dessus qui ne reste pas vraie.
Background
si des éléments flottants sont utilisés, il ne devrait y avoir aucune chance que la colonne de droite s'enroule sous la colonne de gauche, que le conteneur ne contienne pas les deux colonnes (en coupant n'importe quelle partie de la colonne ou en laissant n'importe quelle partie des colonnes déborder sa limite), ou que scrollbars apparaîtra (donc je serais las de suggérer l'utilisation d'autre chose que le débordement:caché pour déclencher le confinement des éléments flottants). L'application de bordures aux colonnes ne doit pas briser la mise en page. Le contenu des colonnes, en particulier de la colonne de droite, ne doit pas casser la disposition.
il semble y avoir une solution simple basée sur une table, mais en toutes circonstances elle échoue lamentablement. Par exemple, en Safari, ma colonne de gauche à Largeur fixe rétrécira si le conteneur devient trop petit, plutôt que de maintenir la largeur que j'ai spécifié. Il semble également que la largeur CSS, lorsqu'elle est appliquée à un élément TD, se réfère à une largeur minimale, de sorte que si quelque chose de plus grand est placé à l'intérieur de celui-ci, il va se dilater. J'ai essayé d'utiliser la disposition de la table:corrigé; n'aide pas. J'ai également vu le cas où L'élément TD représentant la colonne de droite ne s'étendra pas pour remplir la zone restante, ou il apparaîtra à (par exemple une troisième colonne 1px large sera poussée tout le chemin à la côté droit), mais mettre une bordure autour de la colonne de droite montrera qu'elle est seulement aussi large que son contenu en ligne, et les éléments de niveau de bloc avec leur largeur fixée à 100% ne remplissent pas la largeur de la colonne, mais correspondent plutôt à la largeur du contenu en ligne (c.-à-d. la largeur de la TD semble être complètement dépendante du contenu).
Une solution potentielle j'ai vu est trop complexe; Je ne pourrais pas moins se soucier de IE6, aussi longtemps que cela fonctionne dans IE8, Firefox 4, et Safari 5.
3 réponses
Ici, vous allez:
<html>
<head>
<title>Cols</title>
<style>
#left {
width: 200px;
float: left;
}
#right {
margin-left: 200px;
/* Change this to whatever the width of your left column is*/
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
Hello
</div>
<div id="right">
<div style="background-color: red; height: 10px;">Hello</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>le Voir en action ici: http://jsfiddle.net/FVLMX/
je me moque de IE6, tant comme il fonctionne dans IE8, Firefox 4, et Safari 5
cela me rend heureux.
essaye ceci: Démonstration
display: table est étonnamment bonne. Une fois que vous ne vous souciez pas de IE7, vous êtes libre de l'utiliser. Il n'a pas vraiment les inconvénients habituels de <table>.
CSS:
#container {
background: #ccc;
display: table
}
#left, #right {
display: table-cell
}
#left {
width: 150px;
background: #f0f;
border: 5px dotted blue;
}
#right {
background: #aaa;
border: 3px solid #000
}
Morceau de gâteau.
Utiliser 960Grids Aller à l' constructeur automatique de la mise en page et faire une colonne à deux colonnes, fluid design. Construire une colonne de gauche à la largeur des grilles qui fonctionne....c'est le seul défi à relever en utilisant des grilles et c'est très facile une fois que vous avez lu un tutoriel. En un mot, chaque colonne dans une grille est une certaine largeur, et vous définissez le nombre de colonnes que vous voulez utiliser. Pour obtenir une colonne qui est exactement une certaine largeur, vous devez ajuster vos maths de sorte que la largeur de votre colonne est exacte. Pas trop difficile.
aucune chance de l'emballer parce que d'autres ont déjà combattu cette bataille pour vous. Compatibilité aussi loin que vous aurez probablement jamais besoin d'aller. Rapide et facile....Maintenant, téléchargez, personnalisez et déployez.
Voila. Grilles FTW.