Задача такова. Есть контейнер с фиксированой шириной. У контейнера есть 3 дочерних div'a с горизонтальним выравниванием. Размер каждого 33.3333%. Вопрос в том, как растянуть 2 дочерних элемента если не пропадёт 1 дочерний на всю ширину родителя. Интересует только css решение.
3 ответа
html, body, section, div {
margin: 0;
height: 100%;
}
section {
display: flex;
}
div {
flex: 1 1 0px;
}
div:first-child:hover ~ div:last-child {
display: none;
}
<section>
<div style="background:red"></div>
<div style="background:green"></div>
<div style="background:blue"></div>
</section>
Если ширина фиксирована - то ничего сделать не получится. Получится, допустим, следующим образом:
.parent {
display:flex;
padding: 8px;
margin: 32px auto;
background-color: silver;
}
.child {
flex-basis: calc(100% / 3);
flex: grow: 1;
flex-flow: 0;
background-color: white;
padding: 64px;
margin: 8px
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Попробуйте удалить один из дочерних блоков, КодПеро:
html, body, section, div {
margin: 0;
height: 100%;
}
section {
display: table;
width: 100%;
}
div {
display: table-cell;
width: 25%;
}
div:first-child:hover ~ div:last-child {
display: none;
}
<section>
<div style="background:red"></div>
<div style="background:green"></div>
<div style="background:blue"></div>
</section>