CSS - largeur auto flottait élément (extensible float)
J'ai deux flottait colonnes côte à côte. L'utilisateur peut masquer/l'effondrement de l'un de ces colonnes. Dans ce cas, je veux que les autres collumn à développer pour s'adapter à l'ensemble du conteneur.
Est-ce possible avec CSS?
En résumé, il est possible de faire un float pour agrandir la taille de son conteneur?
Même si l'élément est ouvert, si elle a largeur:auto, il devrait se développer. Au moins c'est la façon dont je pense que cela devrait fonctionner.
pouvez-vous nous donner un exemple de code, comment vous/masquer l'effondrement de la colonne?
Il est peu probable que cela est possible dans le plus pur CSS (ce qui les colonnes de réagir à l'utilisateur des événements), mais certainement c'est possible avec js/jQuery.
Avez-vous pensé à utiliser une bibliothèque JavaScript comme jQuery? Il pourrait modifier le style CSS de ces colonnes à la volée sans casser une sueur. [Edit.. remarqué d'autres semblables commentaire ajouté après que j'ai rafraîchi la page - Ah bien, les grands esprits... ;p]
toute chance vous pourriez changer la accepté de répondre à cette question? (Vous êtes le seul qui peut le faire.)
Il est peu probable que cela est possible dans le plus pur CSS (ce qui les colonnes de réagir à l'utilisateur des événements), mais certainement c'est possible avec js/jQuery.
Avez-vous pensé à utiliser une bibliothèque JavaScript comme jQuery? Il pourrait modifier le style CSS de ces colonnes à la volée sans casser une sueur. [Edit.. remarqué d'autres semblables commentaire ajouté après que j'ai rafraîchi la page - Ah bien, les grands esprits... ;p]
toute chance vous pourriez changer la accepté de répondre à cette question? (Vous êtes le seul qui peut le faire.)
OriginalL'auteur brpaz | 2010-08-11
Vous devez vous connecter pour publier un commentaire.
Si votre colonne de gauche implicite de la taille, de dire 250px et votre colonne de droite est SEULEMENT flottait sans taille de l'ensemble, alors il devrait remplir le récipient lorsque la colonne de gauche est effondré. Code serait comme suit:
OriginalL'auteur SimonDowdles
Nup, je ne pense pas que l'on a accepté de répondre fonctionne réellement. Je viens de tenter de faire la même chose, et c'est la solution...
Jouer avec le code ici: http://jsfiddle.net/simoneast/qPHgR/2/
Désolé de Joseph, mais
overflow: hidden
ne devrait jamais mettre les barres de défilement sur l'élément. Et il s'auto-développer en largeur et en hauteur doit afficher l'ensemble de votre contenu, sauf si elle est plus grande que la colonne elle-même (par exemple. d'une image ou d'une taille fixe de l'élément). Êtes-vous sûr que vous n'êtes pas de mettre plus de CSS, que ce qui est ici?Simon, vous avez raison. Si
.right
ou quoi que ce soit à l'intérieur de.right
veut avoir au moins une certaine largeur, puisoverflow: hidden
pouvez couper le contenu si la fenêtre est trop petite. Dans mes tests, j'ai ajoutéoverflow-x: auto;
qui provoque des barres de défilement apparaissent dans ce cas.Je ne peut pas envelopper mon cerveau autour de ce! Pourquoi ce travail?
Ouais c'est un peu déroutant. Sans
overflow:hidden
le contenu dans.right
s'enroule autour et en dessous de.left
. Maisoverflow:hidden
semble avoir des propriétés spéciales où il fait des choses comme développez une boîte pour contenir tous les flottait éléments à l'intérieur et également de régler la taille d'une boîte à compte d'autres chars. Je ne suis pas sûr de savoir exactement pourquoi - les raisons techniques sont probablement enterré dans le CSS quelque part, comme tous les navigateurs modernes semblent avoir ce comportement.OriginalL'auteur Simon East
ensemble
overflow:auto; height:auto;
pour floatet élément🙂
OriginalL'auteur FARHAD AFSAR