Afficher une grille en utilisant divs

Question

J'essaie de pratiquer du CSS/HTML, et je suis en train de lister ce qui devrait être fait dans une table en utilisant divs. Le problème que j'ai, c'est que lorsque je règle les marges, le texte ne s'aligne pas correctement dans les colonnes parce que le texte est plus long que les autres, donc il en résulte une table irrégulière.

par exemple.

123 hello coool 
123 asdfasdfsadf cool 
123 hello coool 
123 asdfasdfasdf kkk 

Ainsi, l'espacement entre chaque section est correcte à savoir 20px, mais étant donné que le texte varie en longueur, il ne semble pas aligné.

Quel est le problème ici?

Answer 1

Comment obtenez-vous vos divs à aligner les uns à côté des autres - c'est-à-simuler des lignes? Si vous utilisez des flotteurs, par ex. float: left, puis l'effet que vous rencontrez est communément appelé emballage sous film rétractable. Dans un emballage rétractable div, la largeur de div correspondra automatiquement à la longueur du contenu. Le seul chemin pur html/css autour de ceci est explicitement mis à width la propriété de votre div. Vous devez définir chacune des divs dans une colonne à la même largeur explicite. Pour que cela soit efficace, vous devez avoir une idée de la longueur de votre contenu, et définir width au moins aussi large.

Si vous souhaitez que chaque div dans une colonne hérite dynamiquement d'une largeur de div ayant le contenu le plus long, vous devez utiliser javascript.

Answer 2

Vous ne leur attribuez probablement pas de largeurs fixes, ce qui les oblige à être dimensionné automatiquement. Les tables feront automatiquement de chaque cellule une même largeur, mais cela ne peut pas être fait en utilisant s, vous devez définir une largeur fixe.

Answer 3

Vous pouvez faire de chaque colonne son propre div. EG:

<div class="col1"> 
    <p>123</p> 
    <p>123</p> 
    <p>123</p> 
    <p>123</p> 
</div> 
<div class="col1"> 
    <p>hello</p> 
    <p>asdfasdfasdf</p> 
    <p>hello</p> 
    <p>asdfasdfasdf</p> 
</div> 
<div class="col1"> 
    <p>cooool</p> 
    <p>cooool</p> 
    <p>cooool</p> 
    <p>cooool</p> 
</div> 

et faire

.col1 { 
    float: left; 
} 

mais il ne causer de la douleur et la souffrance.

Je ne sais pas pourquoi vous voulez faire comme ça; Peut-être avez-vous entendu dire que «les tableaux sont faux», mais c'est incomplet. La phrase entière est "les tables sont fausses pour la disposition".

Utilisez des tableaux pour les données tabulaires, comme ceci.

Answer 4

Ce n'est pas un tableau vs divs, il devrait s'agir d'une table par rapport à un balisage sémantique. Si vous remplacez simplement tous les éléments de la table par des divs, il vous manque tout le point de l'ensemble.

Dans votre exemple, vous utiliseriez une table.