2010-10-12 7 views
0

J'ai 3 conteneurs flottants de largeur inconnue. Le conteneur environnant a une largeur fixe.Problème avec les conteneurs CSS flottants avec une largeur variable

------------- 
| X | X | X | 
------------- 

A l'intérieur du troisième récipient il y a encore des éléments flottants:

--------------------------- 
| X | X | X [ O | O | O ] | 
--------------------------- 

Qu'advient-il lorsque ces éléments execeed la largeur du conteneur environnant est que les éléments individuels vont tomber dans une nouvelle ligne (ce qui est tout à fait fine et comportement attendu):

------------------------- 
| X | X | X [ O | O | O | 
    O | O ] | 
------------------------- 

Mais ce que je veux est que les éléments de l'enfant à flotteur sont en retrait comme celui-ci:

--------------------------------------------------------------------------------- 
| X | X | X [ O | O | O | 
       O | O ] | 
--------------------------------------------------------------------------------- 

Quelqu'un at-il une solution CSS uniquement à ce problème? Devrait travailler dans IE6 aussi. J'ai essayé beaucoup de choses mais je me suis perdu en flotteur.

+0

Je n'arrive même pas à travailler dans la 2ème version: http://www.jsfiddle.net/Syf3t/ –

Répondre

1

Essayez this example pour reproduire votre problème. Je n'arrive même pas à comprendre le comportement que vous décrivez, n'y a-t-il vraiment que des flotteurs?

Si les éléments de colonne flottent sans largeur, alors chaque flottant se développera simplement avec son contenu, et quand il ne rentre pas dans le conteneur, il va tomber (l'élément entier). Sans définir la largeur de ces éléments de colonne, il n'y a pas grand chose à faire à ce sujet.

+0

Oui, il n'y a que des flotteurs. Je pense aussi que ce n'est tout simplement pas possible avec des flotteurs sans largeur explicite. –

1

Je ne suis pas sûr de toutes les conséquences difficiles en ce moment - peut-être afficher le code dans un JSFiddle pour les personnes à jouer avec? - mais la meilleure solution qui vient à l'esprit # sera probablement une autre enveloppe autour des trois O qui flotte également.

+0

Votre lien devrait être http://www.jsfiddle.net/ –

+0

@Alex bien sûr, Merci. Fixe –

Questions connexes