Disposition des colonnes div 2 différentes

Ceci est différent de la disposition simple des 2 colonnes.Disposition des colonnes div 2 différentes

je dois avoir ce html:

<div class="menu"> 
    <div class="right">One</div> 
    <div>Three</div> 
    <div>Four</div> 
    <div class="right">Two</div> 
    <div class="right">Two</div> 
    <div>Four</div> 
    <div class="right">Two</div> 
</div>

Le menu div class a une largeur statique, je dois les divs à l'intérieur pour aller dans une colonne de droite, et les divs normales de rester comme ils sont.

Voici le CSS je suis arrivé à ce jour, mais je ne peux pas semblent le comprendre encore:

div.menu { 
    width: 550px; 
} 
div.menu div { 
    float: left; 
    width: 200px; 
} 
div.menu div.right { 
    float: right; 
}

Les divs ont à l'intérieur un ordre aléatoire, donc je ne peux pas les enfermer dans un div et flotteur.

Voici une esquisse de ce que le code HTML ci-dessus devrait ressembler à:

alt text http://img102.imageshack.us/img102/4494/flytc3.jpg

Source

2009-01-15 Luca Matteis

Êtes-vous vraiment coincé avec cette html? Si oui, je pense que votre seule option est de faire quelque chose de très laid. Pouvez-vous modifier la structure avec javascript ou est-ce interdit? – Prestaul

Je cherchais une solution CSS pure, et oui je suis coincé avec ce HTML. –

Cette programmation est-elle en rapport? Ressemble plus au design à moi. –

Essayez:

div.menu div { 
    float: left; 
    clear: left; 
} 
div.menu div.right { 
    float: right; 
    clear: right; 
}

Source

2009-01-15 03:14:14 Prestaul

Je ne peux pas à comprendre ce que vous essayez d'atteindre. Pourriez-vous s'il vous plaît créer une esquisse de base dans MS Paint ou quelque chose pour que nous puissions vous aider?

EDIT: Peut-être que je ne comprends pas quelque chose ici, mais c'est exactement à quoi il ressemble dans ma fenêtre Chrome (enfin, en dehors des paddings).

Source

2009-01-15 02:19:53

Je suis d'accord. Je vais deviner qu'il a besoin de flotter les deux divs (à droite et à gauche) et avoir une sorte d'élément de clarification après, s'il ne peut pas changer l'ordre div ou quoi que ce soit d'autre. –

Bien sûr, j'ai ajouté l'image. –

Disposition des colonnes div 2 différentes

Répondre

Questions connexes