J'ai un problème avec le code HTML et CSS simple. Je dois faire en sorte qu'une division soit "hors de" parent div, alors que d'autres sont à l'intérieur du parent et doivent l'étirer verticalement.
#parent{
width:80%;
min-height:50px;
background:red;
}
.child{
width:20%;
height:20px;
margin-left:-5%;
background:blue;
float:left;
}
.child-b{
width:40%;
float:left;
}<div id="parent">
<div class="child"></div>
<div class="child-b">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor sit amet purus nec venenatis. Integer maximus, nisi et pretium convallis, erat metus malesuada lorem, nec porttitor leo felis sollicitudin dolor.
</div>
<div class="child-b">
Lorem ipsum.
</div>
</div>La hauteur du parent doit être dynamique, égale à celle de l'enfant-b. L'enfant doit être à 100% du parent div et doit être sur la marge moins gauche, pour être "hors du parent visuellement".
Cela doit ressembler à ceci:
Réponses:
1 pour la réponse № 1Il vaut mieux utiliser flex plutôt que float. Cela vous évitera l’utilisation de oveflow:auto pour résoudre le problème flottant et vous pouvez facilement aligner votre élément et les rendre tous à la même hauteur. Ensuite, utilisez la marge négative sur la division que vous souhaitez effacer comme vous l’avez déjà fait.
#parent {
width: 80%;
min-height: 50px;
margin-left: 50px;
background: red;
display: flex;
padding: 10px;
position: relative;
}
.child {
width: 100px;
margin-left: -50px;
margin-right:5px;
background:blue;
}
.child-b {
flex: 50%;
padding:10px;
background:#fff;
}<div id="parent">
<div class="child"></div>
<div class="child-b">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor sit amet purus nec venenatis. Integer maximus, nisi et pretium convallis, erat metus malesuada lorem, nec porttitor leo felis sollicitudin dolor.
</div>
<div class="child-b">
Lorem ipsum.
</div>
</div>0 pour la réponse № 2
Vous pouvez utiliser la propriété display:flex;
#parent{
width:80%;
min-height:50px;
background:red;
display: flex;
align-item:center;
}
Pour une meilleure compréhension de la flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox