emballage Unordered problèmes de mise en page de la liste CSS

Question

Peut-être que je vais sur ce mal, mais je suis en train de créer un <ul> rempli d'éléments comme celui-ci:

<li> 
    <div> 
     <img src="img/productname.png" alt="desc" /> 
     <h2>Product name</h2> 
     <p>This text is variable in lenght so the height of each list item may differ.</p> 
    </div> 
</li> 

Depuis le site Web de ce qui se passe a une largeur maximale Je dois envelopper après un certain nombre d'éléments (trois semblent être le point idéal), mais j'ai du mal à me rappeler comment faire.

Il est également important que les images soient toutes en haut de chaque "rangée" et que la ligne suivante ne soit pas cassée par la précédente. Si je viens d'utiliser float:left; sur les éléments de la liste et le premier élément de la liste a une description plus longue que l'autre puis je me retrouve avec cet élément bloquant les éléments sur la ligne suivante pour que je sois une table comme:

+-----+-----+-----+ 
|  | 2 | 3 | 
| 1 +-----+-----+ 
|  |  | 
+-----+ 4 | 
     |  | 
     +-----+ 

maintenant, ce que je dois quelque chose qui permet grâce simplement l'ajout d'éléments de la liste et qui crée une mise en page comme:

+-----+-----+-----+ 
|  | 2 | 3 | 
| 1 +-----+-----+ 
|  | 
+-----+-----+ 
| 4 | 5 | 
|  +-----+ 
+-----+ 

est-ce même possible ou suis-je simplement imaginer que j'ai créé mises en page comme ça avant?

(BTW, la raison pour laquelle je ne veux pas utiliser les tableaux pour cela est parce que ce n'est pas des données tabulaires, c'est une liste de produits qui doit envelopper et googler clairement pour tout ce qui a "css/html" et " grille "en elle est sans espoir grâce à la fad de disposition de la grille actuelle)

Answer 1

Si vous n'en avez pas besoin pour fonctionner dans Firefox 2 et versions antérieures, vous pouvez définir <li> s display sur inline-block. Pour que cela fonctionne dans IE 6 (et peut-être IE 7, j'oublie quand le support correct inline-block a été ajouté), vous pouvez les définir à display: inline. Tant qu'ils ont un sens width (que je suppose qu'ils ont), alors ils affichent comme si elles sont inline-block - voir http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

Answer 2

Eh bien, vous pouvez obtenir cet effet sans utiliser de tables, mais en utilisant divs à la place. Il suffit de placer 1, 2 et 3 dans un div et 4 et 5 dans un autre (en gardant évidemment chaque sous-ensemble d'éléments dans son propre ul tag). Je ne sais pas si c'est ce que tu cherchais. Cela ressemble à une structure plutôt compliquée que vous essayez d'atteindre.