web-dev-qa-db-fra.com

Redimensionner <div> automatiquement en fonction du texte?

J'ai le JS suivant Fiddle pour montrer ce que j'essaie d'accomplir: http://jsfiddle.net/sVKU8/2/

1) Je suppose que cette première partie est simple - Existe-t-il un moyen de mettre à jour la classe parent label pour que son width soit automatiquement défini en fonction de la largeur totale des deux enfants <div>s pour que la bordure s'enroule uniquement autour du vert et du rouge <div>s? Je pensais que mettre width: auto était censé le faire, mais mes compétences CSS manquent apparemment.

2) Ce que j'aimerais accomplir ensuite serait de supprimer l'attribut width de mon label-text classe et avoir la largeur définie (ou augmenter automatiquement, si possible) chaque fois que j'applique du texte à cette <div> via JavaScript sans habillage de texte (c'est-à-dire en conservant la hauteur d'origine de la classe label).

Je ne savais pas si je devais essayer de calculer la largeur en fonction du texte réel, ou s'il y avait un moyen d'appliquer simplement le texte avec un paramètre de largeur qui lui permettrait de grandir.

Toute contribution ou suggestion serait grandement appréciée!

csshtmlwidthautosize
12
lhan

cliquez ici Alternative CSS sans JS supplémentaire en utilisant l'approche traditionnelle floating elements

14
AzDesign

Ajoutez cette propriété à votre css:

 .based-on-text{
   display: inline-block;
 }

De cette façon, le div agira comme un bloc mais aura exactement la largeur dont il a besoin au lieu de prendre toute la largeur du niveau parent!

24
Yann Chabot

Ce violon (Cliquez ICI) montre en utilisant inline-block sur le div text-label et un petit JS pour régler la largeur sur la boîte extérieure avec la bordure.

Ceci est le javascript. Assez laid. Il y a probablement une meilleure façon:

$(".label").css("width", 
    parseFloat( $(".label-image").css("width")) 
    + parseFloat( $(".label-text").css("width"))
);
2
Lee Meador