Redimensionner <div> automatiquement, basée sur le texte?
J'ai suivantes JS Fiddle démontrer ce que je suis en train de réaliser:
http://jsfiddle.net/sVKU8/2/
1) je suppose que cette première partie est facile, existe - il un moyen de mettre à jour le parent label
classe automatiquement c'est width
définies en fonction de la largeur totale des deux enfants <div>
s de sorte que la frontière que s'enroule autour du vert et du rouge <div>
s? J'ai pensé réglage width: auto
était censé le faire, mais mon CSS compétences sont apparemment dépourvues.
2) Ce que j'aimerais faire la prochaine serait de supprimer la width
attribut de mon label-text
classe et ont la largeur (ou croître automatiquement, si possible) à chaque fois que j'ai appliquer le texte, pour que <div>
via JavaScript sans habillage du texte (c'est à dire en gardant de la hauteur d'origine de la label
classe).
Je ne savais pas si je devais essayer de calculer la largeur, sur la base du texte, ou si il y a un moyen de simplement appliquer le texte avec un réglage de la largeur qui va lui permettre de croître.
D'entrée ou de suggestions seraient grandement appréciés!
OriginalL'auteur lhan | 2013-04-16
Vous devez vous connecter pour publier un commentaire.
cliquez ici
CSS alternative sans autre JS à l'aide du traditionnel
floating elements
approcheOriginalL'auteur AzDesign
Ajouter cette propriété css :
De cette façon, la div se comportera comme un bloc, mais auront exactement la largeur il a besoin au lieu de prendre le tout parent au niveau de la largeur !
Mais cela ne fonctionne pas dans la version IE7 ou plus tôt. Je suis en train de faire un entièrement compatible plugin, dans le cas où vous vous demandez. Est-il une solution pour cela?
Probablement à l'aide de la "float: left;" propriété de CSS, avec un clearfix, je suppose. Un peu hacky mais ça fonctionne assez bien dans la plupart des cas. Vous devez appliquer la clearfix sur l'élément parent -> css-tricks.com/snippets/css/clear-fix
OriginalL'auteur Yann Chabot
Ce violon (Cliquez ICI) montre à l'aide de
inline-block
sur la divtext-label
et un peu de JS pour définir la largeur sur l'extérieur de la boîte avec de la frontière.C'est le javascript. Assez laid. Il y a probablement une meilleure solution:
OriginalL'auteur Lee Meador