Une solution courante à ce problème utilise un positionnement absolu ou des flottants recadrés, mais ceux-ci sont délicats car ils nécessitent un réglage approfondi si vos colonnes changent en nombre + taille, et que vous devez vous assurer que votre colonne "principale" est toujours la plus longue. Au lieu de cela, je vous suggère d'utiliser l'une des trois solutions les plus robustes:
display: flex: de loin la solution la plus simple et la meilleure et très flexible - mais non prise en charge par IE9 et les versions antérieures.tableou display: table: très simple, très compatible (à peu près tous les navigateurs), assez flexible.display: inline-block; width:50% avec un hack de marge négatif: assez simple, mais les bordures en bas de colonne sont un peu délicates.
1. display:flex
C'est vraiment simple et il est facile de s'adapter à des mises en page plus complexes ou plus détaillées - mais flexbox n'est pris en charge que par IE10 ou version ultérieure (en plus d'autres navigateurs modernes).
Exemple: http://output.jsbin.com/hetunujuma/1
HTML pertinent:
<div class="parent"><div>column 1</div><div>column 2</div></div>
CSS pertinent:
.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }
Flexbox prend en charge beaucoup plus d'options, mais pour avoir simplement un nombre quelconque de colonnes, ce qui précède suffit!
2. <table>oudisplay: table
Un moyen simple et extrêmement compatible de le faire est d'utiliser un table- je vous recommande d'essayer d'abord si vous avez besoin d'un support ancien IE . Vous avez affaire à des colonnes; divs + floats ne sont tout simplement pas la meilleure façon de le faire (sans parler du fait que plusieurs niveaux de divs imbriqués juste pour pirater les limitations css ne sont guère plus "sémantiques" que d'utiliser simplement une table simple). Si vous ne souhaitez pas utiliser l' tableélément, pensez à cssdisplay: table (non pris en charge par IE7 et versions antérieures).
Exemple: http://jsfiddle.net/emn13/7FFp3/
HTML pertinent: (mais pensez à utiliser un simple à la<table>place)
<div class="parent"><div>column 1</div><div>column 2</div></div>
CSS pertinent:
.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/
Cette approche est beaucoup plus robuste que l'utilisation overflow:hiddenavec des flotteurs. Vous pouvez ajouter à peu près n'importe quel nombre de colonnes; vous pouvez les faire évoluer automatiquement si vous le souhaitez; et vous conservez la compatibilité avec les anciens navigateurs. Contrairement à la solution flottante, vous n'avez pas non plus besoin de savoir à l' avance quelle colonne est la plus longue; les échelles de hauteur très bien.
KISS: n'utilisez pas de hacks flottants sauf si vous en avez spécifiquement besoin. Si IE7 est un problème, je choisirais quand même un tableau simple avec des colonnes sémantiques sur une solution CSS-trick difficile à maintenir et moins flexible.
Soit dit en passant, si vous avez besoin que votre mise en page soit réactive (par exemple, pas de colonnes sur les petits téléphones mobiles), vous pouvez utiliser une @mediarequête pour revenir à la mise en page en blocs simples pour les petites largeurs d'écran - cela fonctionne que vous utilisiez <table>ou tout autre display: tableélément.
3. display:inline blockavec un hack de marge négative.
Une autre alternative est d'utiliser display:inline block.
Exemple: http://jsbin.com/ovuqes/2/edit
HTML pertinent: (l'absence d'espaces entre lesdivbalises est significative!)
<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>
CSS pertinent:
.parent {
position: relative; width: 100%; white-space: nowrap; overflow: hidden;
}
.parent>div {
display:inline-block; width:50%; white-space:normal; vertical-align:top;
}
.parent>div>div {
padding-bottom: 32768px; margin-bottom: -32768px;
}
C'est un peu délicat, et la marge négative signifie que le "vrai" bas des colonnes est obscurci. Cela signifie à son tour que vous ne pouvez rien positionner par rapport au bas de ces colonnes car cela est coupé par overflow: hidden. Notez qu'en plus des blocs en ligne, vous pouvez obtenir un effet similaire avec des flottants.
TL; DR : utilisez flexbox si vous pouvez ignorer IE9 et les versions antérieures; sinon essayez une table (css). Si aucune de ces options ne fonctionne pour vous, il y a des hacks de marge négatifs, mais ceux-ci peuvent provoquer des problèmes d'affichage étranges qui sont faciles à manquer pendant le développement, et il y a des limites de mise en page dont vous devez être conscient.