1. Accueil
  2. Question et réponse
  3. Problème flottant div

Problème flottant div

2011-02-04 8 views

Répondre

1

vous pouvez ajouter float:right; pour le #wrapper .long

exemple: http://jsbin.com/aruvo4/4

De plus, ajoutez overflow:auto pour votre #wrapper pour effacer les flotteurs. http://www.quirksmode.org/css/clearing.html

Source

2011-02-04 11:05:14 Sotiris

+0

Les divs les plus longs n'ont aucune classe. Le texte qu'ils contiennent varie en longueur. Aurait dû le rendre plus clair. Merci quand même. – SuprDewd

+0

@SuprDewd dans votre premier exemple, il avait. Vous ne pouvez pas ajouter de classe pour le div long? Sinon, vous pouvez utiliser javascript pour sélectionner et appliquer les propriétés, ou utiliser la pseudo-classe 'nth-child()' pour le sélectionner, comme 'div # wrapper div: nth-child (2) {float: right;}' . Mais cela ne fonctionnera pas pour IE8 ci-dessous. – Sotiris

+0

Je ne peux pas utiliser: nth-child() car certaines divs sont plus longues que d'autres, et je n'ai pas le moyen de détecter lesquelles sont. Le nombre de divs peut également varier. – SuprDewd

0

organiser comme vous le feriez d'une table (à savoir, placer des balises div autour de vos « lignes ») et définir les propriétés d'affichage de div à table-row et table-cell le cas échéant. La cellule longue doit avoir le haut et le bas = 0 et la position doit être définie sur absolu. Il doit également y avoir une cellule vide qui tient la place du long lui permettant de s'étirer.

Voici un explanation complet.

Source

2011-02-04 11:41:35 mut1na

0 
<div class="small_divs"> 
</div> 
<div class="small_divs"> 
</div> 
<div class="small_divs"> 
</div> 
<div id="big_div> 
</div> 

#big_div { float:right;}

Source

2011-02-04 16:42:06 LightningWrist

1

est ici une solution CSS3 pour vous:

#wrapper { width: 200px; overflow: auto; } 
#wrapper div { float: left; background: pink; min-height: 80px; width: 80px; margin: 5px; padding: 4px; } 
#wrapper div:nth-child(2) { float: right; }

Pour une solution multi-navigateur, cependant, vous aurez besoin d'ajouter une classe à la div que j'ai flottais droit

: le soutien du navigateur nième enfant

IE8 FF3.5+ SA3.1+ OP9.5+ CH2+ 
None Full Full Full Full

- modifier -

Il suffit de lire quelques commentaires plus ici et vu que vous ne pouvez pas utiliser la pseudo-classe. Je vais garder la réponse ici car cela fonctionnera dans d'autres cas.

Source

2011-02-04 17:02:23

+0

Merci quand même. :) – SuprDewd

Questions connexes

 Questions connexes