J'ai deux collumns flottés côte à côte. L'utilisateur peut cacher / effondrer l'un de ces collumns. Dans ce cas, je veux que l'autre collumn soit développé pour adapter tout le conteneur.
est-ce possible avec CSS?
En CV, il est possible de faire un flotteur pour développer la taille de son conteneur? Même si l'élément est flotté, s'il a une largeur: Auto Il devrait se développer. Au moins c'est comme ça, je pense que cela devrait fonctionner.
3 Réponses :
Si votre colonne de gauche a une taille implicite, dites 250px et votre colonne droite n'est activée qu'aucune taille de jeu, il doit remplir le conteneur lorsque la colonne gauche est effondrée. 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 */
}
Je dois voter cela parce que cela ne fonctionne pas. Voir cet exemple: Jsfiddle.net/4jtny/2
NUP, je ne pense pas que la réponse acceptée fonctionne réellement. J'essayais juste la même chose, et c'est la solution ... joue avec le code ici: Http://jsfiddle.net/simoneeast/qphgr/2/
C'est une solution de contournement essentiellement bonne. Mais ce que vous n'aimez pas, c'est comment le conteneur "maintien" débordent, mettant les barres de défilement sur le conteneur au lieu de la fenêtre. C'est regrettable.
Désolé, Joseph mais Overflow: caché ne doit jamais mettre les barres de défilement sur l'élément. Et il se développera automatiquement en largeur et à la hauteur afin d'afficher tout votre contenu, sauf si elle est plus grande que la colonne elle-même (par exemple, une image ou un élément de taille fixe). Êtes-vous sûr que vous ne mettez pas de supplément de CSS dans ce qui est ici?
Simon, tu as raison. Si .right ou quoi que ce soit à l'intérieur de .right veut être au moins une certaine largeur, alors Overflow: caché peut couper le contenu si le contenu la fenêtre est trop petite. Dans mes tests, j'ai ajouté Overflow-x: auto; qui provoque une barre de défilement à apparaître dans ce cas.
Je ne peux pas envelopper mon cerveau autour de ça! Pourquoi cela fonctionne-t-il?
@Pottorone ouais, c'est un peu déroutant. Sans Overflow: caché Le contenu dans .right sera envelopper et sous .left . Mais Overflow: caché semble avoir des propriétés spéciales dans lesquelles il fait des choses telles que l'élargissement d'une boîte pour contenir tous les éléments flottés à l'intérieur et ajuster la taille d'une boîte pour tenir compte des autres flotteurs. Je ne sais pas exactement pourquoi - les raisons techniques sont probablement enterrées dans le CSS Spec quelque part, car tous les navigateurs modernes semblent avoir ce comportement.
SET Overflow: Auto; Hauteur: Auto; pour l'élément flotté
:)
Pouvez-vous nous donner un échantillon de code, comment vous cachez / effondrer la colonne?
Il est peu probable que cela soit possible dans Pure CSS (faire réagir les colonnes aux événements utilisateur), mais il est certainement difficile avec JS / JQuery.
Avez-vous pensé à utiliser une bibliothèque JavaScript comme JQuery? Cela pourrait changer le style CSS de ces colonnes à la volée sans briser de la sueur. [Edit .. remarqué Autre commentaire similaire Ajouté après ma page rafraîchie - ah bien, grands esprits ...; p]
@brpaz - Toute chance que vous puissiez changer la réponse acceptée à cette question? (Vous êtes le seul à pouvoir le faire.)