CSS multiples divs multi-colonnes

Question

J'ai un tas d'éléments (texte, image, contenu mixte, etc) que je veux afficher. L'utilisateur peut définir quelle ligne et quelle colonne apparaît dans cet élément. Par exemple, dans la ligne 1, il peut y avoir deux éléments/colonnes, les deux images. Dans la deuxième rangée, il pourrait y avoir trois éléments/colonnes, une avec une image, deux autres comme texte pur. Oh, et l'utilisateur peut spécifier la largeur d'une colonne/image/élément particulier.

J'ai une solution qui utilise plusieurs tables qui fonctionne. En substance, chaque ligne est une nouvelle table. Cela fonctionne pour la plupart. Je me demande si je peux utiliser uniquement des divs?

Maintenant, mon CSS foo fait défaut, et j'ai essayé de copier des exemples sur le web, et je n'ai pas réussi à le faire fonctionner. En ce moment j'ai quelque chose comme ceci:

[for each row] 
    [div style="float: none"] 
    [for each column] 
    [div style="float: left"] 
     [content] 
    [/div] 
[/div] 
[br] 

Mais tout se chevauche.

J'ai aussi essayé d'utiliser "position: relative", mais les choses semblent encore plus bizarres.

Ainsi, les divs peuvent-ils être utilisés pour plusieurs lignes et un nombre différent de colonnes?

Answer 1

Ils peuvent bien sûr! L'effet de base (cela ressemble) vous cherchez est comme ceci:

#wrapper { 
 
    width: 900px; 
 
} 
 
    
 
.item { 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
    float: left; 
 
}

<div id="wrapper"> 
 
    <div class="item">Something</div> 
 
    <div class="item">Something else</div> 
 
    <div class="item">Something cool</div> 
 
    <div class="item">Something sweet</div> 
 
    <div class="item">Something just ok</div> 
 
</div>

Alors, que cela n'est mis en place un conteneur à largeur fixe (la #wrapper) et remplissez-le avec "blocs". Parce que chacun a une largeur fixe et est flottant à gauche, ils seront alignés dans une grille. En raison de la largeur/marge que j'ai définie pour chacun, vous devriez obtenir 4 par rangée. Si vous avez besoin d'espaceurs, placez simplement des DIVs vierges pour obtenir le contenu sur la bonne ligne/colonne.

Answer 2

Le système de grille 960 est conçu pour accomplir des choses comme celles-ci. Jetez un oeil à http://960.gs/ ils ont beaucoup d'exemples de ce que vous pouvez faire avec 960.

Pour les non-inoctrinés, il définit deux types de mises en page 12 colonnes ou 16 colonnes. Chaque colonne est une largeur prédéfinie avec des gouttières prédéfinies entre eux. Vous pouvez ensuite utiliser les styles css intégrés pour avoir un div couvrant un nombre quelconque de colonnes. Il est incroyablement puissant pour les mises en page où différentes sections de la page en utilisant différentes mises en page.