Mam problem z prostym kodem HTML i CSS. Muszę sprawić, by jeden div był "poza" div jednostki, podczas gdy inne są wewnątrz rodzica, i muszą rozciągnąć go pionowo.
#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>Wysokość nadrzędna musi być dynamiczna, równa wartości child-b. Dziecko musi być w 100% rodzicielskie div i musi być na minusowym marginesie, aby być "poza rodzicem wizualnie".
Musi to wyglądać tak:
Odpowiedzi:
1 dla odpowiedzi № 1Lepiej używać flexu zamiast float, co pozwoli ci uniknąć użycia oveflow:auto Aby rozwiązać problem z płynnością, możesz łatwo wyrównać swój element i ustawić wszystkie na tej samej wysokości. Następnie użyj ujemnego marginesu na div, który chcesz zrobić outisde tak jak już zrobiłeś.
#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 dla odpowiedzi nr 2
Możesz użyć nieruchomości display:flex;
#parent{
width:80%;
min-height:50px;
background:red;
display: flex;
align-item:center;
}
Aby lepiej zrozumieć Flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox