web-dev-qa-db-fra.com

Colonnes de disposition - hauteur égale

Je me souviens d’avoir commencé par utiliser des tableaux pour les mises en page et appris que je ne devais pas le faire. Je travaille sur un nouveau site et ne peux pas sembler faire des colonnes de hauteur égale sans utiliser de tables. Voici un exemple de tentative avec des balises div.

<div class="row">
<div class="column">column1</div>
<div class="column">column2</div>
<div class="column">column3</div>
<div style="clear:both"></div>
</div>

Maintenant, ce que j’essayais de faire, c’est de faire en sorte que les colonnes flottent à gauche et de régler leur largeur à 33%, ce qui fonctionne bien. J’utilise le clear: les deux div pour que la ligne ait la taille de la plus grande colonne, mais les colonnes auront des tailles différentes en fonction de la quantité de contenu dont ils disposent. J'ai trouvé de nombreux correctifs qui impliquent principalement des hacks CSS et lui donnent juste l'apparence d'être juste, mais ce n'est pas ce que je veux. Je pensais simplement le faire en javascript mais cela aurait un aspect différent pour ceux qui choisissent de désactiver leur javascript. La seule vraie façon de le faire, à laquelle je puisse penser, consiste à utiliser des tableaux, car les cellules ont toutes la même hauteur dans la même rangée. Mais je sais que c'est mauvais d'utiliser des tables. Après avoir cherché pour toujours, je suis tombé sur ceci: http://intangiblestyle.com/lab/equal-height-columns-with-css/ Ce qu'il semble faire est exactement la même chose que les tableaux, car c'est juste régler son affichage exactement comme des tables. Est-ce que cela serait aussi grave que d'utiliser des tables? Honnêtement, je ne trouve rien d'autre que je puisse faire.

modifier

@Su 'J'ai examiné des "colonnes fausses" et je ne pense pas que c'est ce que je veux. Je pense que je serais capable d'implémenter de meilleurs designs pour mon site en utilisant la méthode display: table. J'ai posté cette question parce que je ne savais pas si je devais le faire, car j'ai toujours entendu dire que c'était mauvais en utilisant des tableaux dans les présentations de sites Web.

htmlcsslayoutwebsite-design
2
Kyle

Non, utiliser display: table, display: table-row et display: table-cell ne serait pas aussi grave que d'utiliser les balises <table>. La raison en est que HTML est un langage sémantique , ce qui signifie que les balises utilisées doivent décrire le contenu qu’il contient. Dans ce cas, CSS peut être utilisé pour décrire au navigateur la manière dont les données doivent être présentées, et puisque la fonctionnalité de présentation que vous recherchez est celle d'un tableau, vous pouvez aller de l'avant et le faire.

Je mentionnerai cependant que ils ne sont pas supportés dans IE7 ou une version inférieure .

P.S. Vous pouvez également consulter des questions similaires sur le dépassement de capacité.

3
Nightfirecat

Nous vous suggérons d’utiliser les colonnes comme suit avec une requête multimédia afin d’éviter que des écrans étroits affichant les colonnes s’ils ne fonctionnent pas correctement. Il est codé pour Chrome et Safari (-webkit) ainsi que pour Firefox (-moz). Vous pouvez modifier le nombre de colonnes et l’écartement de colonnes en fonction de vos besoins. Je trouve que c'est assez fiable.

@media only screen and ( min-width: 1200px ) { 
  .two-col {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
      -webkit-column-gap: 1.5rem;
         -moz-column-gap: 1.5rem;
              column-gap: 1.5rem
  }
}

Un autre article. Si vous souhaitez que les colonnes soient alignées en haut, que l'une se termine avec 12 lignes et l'autre avec 11 lignes, vous pouvez également ajouter vertical-align: top.

1
Michael Moriarty