Comment ajuster la largeur d'un élément enfant sans ajuster la largeur du parent en CSS?

Question

Je donne les résultats suivants:

<div class="parent"> 
    <div class="sizer" /> 
    <div class="child" /> 
</div> 

.sizer { 
width: 200px; 
} 

.child { 
position: relative; 
width: 400px; 
} 

Je ne suis pas autorisé à définir explicitement la largeur du parent, et je ne suis pas autorisé à mettre l'enfant à position:absolute. En utilisant CSS, existe-t-il un autre moyen de définir la largeur de .child à 400 sans que la largeur de .parent ne soit élargie de 200 à 400?

Answer 1

Si le parent a une largeur définie, il ne s'étendra pas avec la largeur de l'enfant, même si la largeur de l'enfant dépasse celle du parent. Voir this JS Fiddle example.

.parent { 
    width: 300px; 
    height: 50px; 
} 

.child { 
    width: 400px; 
    height: 50px; 
    position: relative; 

} 

---

MISE À JOUR

Je me demande s'il y a le parent

est une sorte de hack qui me permet de le faire sans réglage de la largeur

Il y a n o manière d'accomplir ceci sans que le parent ait une sorte de propriété de largeur ou de largeur. Si vous êtes seulement opposé à l'utilisation de la propriété width sur le parent, vous pouvez utiliser plusieurs alternatives de type largeur. Comme cimmanon expliqué dans un commentaire ci-dessous, vous pouvez définir .parent pour avoir un max-width. Il ne doit pas nécessairement être 100%; tout max-width fera, tant qu'il est inférieur à la largeur de l'enfant. See this JS Fiddle example ou consultez ce code:

.parent { 
    max-width: 200px; 
} 

.child { 
    width: 400px; 
} 

Sinon, vous pouvez utiliser position:absolute et définir les left et right propriétés. See this JS Fiddle example ou vérifier ce code:

.parent { 
    position:absolute; 
    left:0; 
    right:0; 
} 

Mais rappelez-vous, ce ne sont que deux des nombreuses alternatives possibles. J'espère que cela t'aides!

Answer 2

Vous pouvez définir la largeur maximale du parent sur 100%.

http://jsfiddle.net/aFdzy/

.parent { 
    max-width: 100%; 
} 

.child { 
    width: 400%; 
}