Comment rafraîchir la taille d'un div après avoir ajouté des éléments à ce

Question

J'ai un élément comme celui-ci:

<div id="content" style="border: 2px solid black"> 
</div> 

Et par JQuery ajouter quelques nouveautés:

$("#content").append($('<div></div>').addClass("box")); 

où

.box { margin: 10px; padding: 10px; border: 1px solid black } 

Mais le div extérieur ne se redimensionne pas lorsque je fais cela, donc je reçois une boîte intérieure qui dépasse d'un solide extérieur b bœuf. Comment puis-je obtenir la boîte externe pour se redimensionner quand j'ajoute cette boîte intérieure?

Answer 1

Corriger le sélecteur si ce n'est pas une faute de frappe

$("#content") // id="content" (correct) 
$("content") // tagName = content 

Et changer l'affichage du div inline-block

#content { 
    display: inline-block; 
} 

Ensuite, la div ne sera pas occuper toute la ligne.

Answer 2

essayez ceci:

js

$('#content').append('<div class="box">&nbsp;</div>'); 

html

<div id="content" style="border:2px solid black;overflow:hidden;"> 
</div> 

J'espère que son aide!

Answer 3

#content ne se redimensionne pas, puisqu'il est width est probablement défini dans votre CSS.

Soit l'agrandir, soit le dimensionner de manière appropriée.

On dirait que #content doit avoir une largeur supérieure à 40px, puisque la div interne a 10 marge et 10 rembourrage, soit 20 sur la gauche et 20 sur la droite.

Donc, quelque chose comme:

$("#content").css("width","100%").append($('<div></div>').addClass("box")); 

Ou mieux encore, mettre en place votre CSS à la bonne largeur pour commencer:

#content { width: ... ; } 

---

Si vous êtes flottaient .box au sein #content alors mettre le overflow de #content à auto (ou caché), sinon la boîte extérieure ne "voit" pas l'auberge flottante boîtes d'er:

#content { overflow: auto; }