CSS - élément flottant à largeur automatique (flotteur extensible)

J'ai deux colonnes flottantes côte à côte. L'utilisateur peut masquer/réduire l'une de ces colonnes. Dans ce cas, je veux que l'autre colonne se développe pour s'adapter à tout le conteneur.CSS - élément flottant à largeur automatique (flotteur extensible)

Est-ce possible avec CSS?

En résumé, il est possible de faire un flotteur pour développer à la taille de son conteneur? Même si l'élément est flottant, s'il a la largeur: auto, il devrait se développer. Au moins c'est comme ça que je pense que ça devrait marcher.

Source

2010-08-11 brpaz

pouvez-vous nous donner un exemple de code, comment cacher/réduire la colonne? – Sotiris

Il est peu probable que cela soit possible en CSS pur (ce qui fait que les colonnes réagissent aux événements utilisateurs), mais c'est certainement faisable avec js/jQuery. –

Avez-vous pensé à utiliser une bibliothèque JavaScript comme jQuery? Il pourrait changer le style CSS de ces colonnes à la volée sans casser un sueur. [Modifier .. remarqué autre commentaire similaire ajouté après que j'ai rafraîchi la page - Eh bien, grands esprits ...; p] –

-3

Si votre colonne de gauche a une taille implicite, disons 250px et que votre colonne de droite est UNIQUEMENT flottante sans taille définie, alors elle devrait remplir le conteneur lorsque la colonne de gauche est réduite. Le code serait comme suit:

#leftcol{ 
width:250px; 
float:left; 
clear:none; 
} 

#rightcol{ 
float:left; 
overflow:hidden; 
width:auto; /* This may or may not work */ 
}

Source

2010-08-11 13:56:07 SimonDowdles

Je dois voter parce que ça ne marche pas. Voir cet exemple: http://jsfiddle.net/4jtnY/2/ –

Nup, je ne pense pas que la réponse acceptée fonctionne réellement. Je ne faisais que tenter la même chose, ce qui est la solution ...

.left { 
    float: left; 
} 
.right { 
    overflow: hidden; 
    /* don't float this one */ 
}

Jouez avec le code ici: http://jsfiddle.net/simoneast/qPHgR/2/

Source

2012-04-26 12:16:25

Ceci est une bonne solution de contournement. Mais ce qui n'aime pas, c'est comment le conteneur ".right" déborde, en plaçant les barres de défilement sur le conteneur au lieu de la fenêtre. C'est regrettable. –

Désolé Joseph mais «overflow: hidden» ne devrait jamais mettre des barres de défilement sur l'élément. Et il se développera automatiquement en largeur et en hauteur, il devrait donc afficher tout votre contenu sauf s'il est plus grand que la colonne elle-même (par exemple, une image ou un élément de taille fixe). Êtes-vous sûr de ne pas ajouter de CSS supplémentaire à ce qui est ici? –

Simon, tu as raison. Si '.right' ou quoi que ce soit à l'intérieur de' .right' veut avoir au moins une certaine largeur, alors 'overflow: hidden' peut couper le contenu si la fenêtre est trop petite. Dans mes tests, j'ai ajouté 'overflow-x: auto;' qui fait apparaître des barres de défilement dans ce cas. –

mis overflow:auto; height:auto; pour l'élément floatet :)

Source

2013-02-05 13:20:30

CSS - élément flottant à largeur automatique (flotteur extensible)

Répondre

Questions connexes