Растянуть 2 div'a по ширине

242

22 февраля 2017, 20:13

Задача такова. Есть контейнер с фиксированой шириной. У контейнера есть 3 дочерних div'a с горизонтальним выравниванием. Размер каждого 33.3333%. Вопрос в том, как растянуть 2 дочерних элемента если не пропадёт 1 дочерний на всю ширину родителя. Интересует только css решение.

Answer 1

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>

Answer 2

Если ширина фиксирована - то ничего сделать не получится. Получится, допустим, следующим образом:

.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>

Попробуйте удалить один из дочерних блоков, КодПеро:

http://codepen.io/malginovdesign/pen/ygddmG

Answer 3

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Обязательно ли класть кнопку отправки в форму?

Подскажите пожалуйста обязательно ли класть <button> для отправки в тег <form> Например если я ее вытяну за приделы формы ее можно будет в дальнейшем...

249

HTML

Добавление элемента Select Options JQuery

Имеется ComboBox при выборе который передаёт полученные значения из базы при помощи ajax во второй ComboBox, когда приходит 1 значение все отображается...

273

HTML

Выравнивание блоков по высоте CSS/jQuery

Здравствуйте, верстая одну из страниц сайта,столкнулся з проблемой выравнивания блока по выcотеЕсть три блока

293

HTML

2 блока разной высоты в одном ряду

Как сделать, что бы блоки были на одном уровне ( тк

306