Добрый день. Есть блок див, в нем ещё три.



1,3 - имеют разную ширину, но одинаковую высоту. А блок 2 должен заполнить свободное место между блоками 1 и 3.

Помогите решить проблему. Спасибо.

Наружному ДИВу пропиши в стилях "display: table" либо "display:inline-table". Внутренним ДИВам, также в стилях, укажи "display: table-cell". Тогда и высота у внутренних ДИВов будет гарантированно, как у внешнего (не надо указывать явно), и заполнят они всю длину. При указании ширины для 1-го и 3-го и при не указании ширины у 2-го он (т.е. 2-й) как раз заполнит всё пространство.
Если при этом размеры наружного ДИВа будут меняться, то внутренние будут автоматически подстраиваться.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

sergeiss
А если ширина 1,3 может варьироваться и зависит от ширины вставляемого в них изображения?

То тогда один блок float: left; последний блок float: right;
Но по сути так не делается как ты пишешь что может размер блока варьироваться от изображения. Если действительно так и твое первое изображение в первом блоке будет к примеру 60% от ширины общего дива а второе изображение в блоке 3 будет хотябы 41% то твой третий блок съедит.
Я бы установил блокам 1, 2 и 3 ширину в процентах, таким образом второй блок будет автоматом заполнен, а для картинок 1 и 3 блока установить ширину 100% а высоту auto
Можно к блокам применить float и media, тогда при изменении ширины крана 3 блок будет находиться под 1

Astin
Да, я так делал, но у меня возник вопрос - в 1 и 3 блоке могут быть изображения разного размера по ширине. Хочется, чтоб эти картинки выглядели визуально одинаковыми.

Пример, без адаптивности

Допустим имеем блоки

<div class="row">
    
	<div class="blok1">Здесь картинка</div>
	
	<div class="blok2"></div>
	
	<div class="blok3">Здесь картинка</div>

</div>

К ним стили

.row {
  padding-right: 4px;
  padding-left: 4px;
}
.row:before,
.row:after {
  display: table;
  content: " ";
}
.row:after {
  clear: both;
}
.blok1, .blok2, .blok3 {
  position: relative;
  /* Можешь оставить отступы а можешь поставить 0 */
  padding-left: 15px; 
  padding-right: 15px;
}
.blok1 {
  float: left;
  width: 33.33333333%;
}
.blok2 {
  float: left;
  width: 33.33333333%;
}
.blok3 {
  float: left;
  width: 33.33333333%;
}
.blok1 img,
.blok3 img {
  display: block;
  max-width: 100%;
  height: auto;
}

Ты можешь основному блоку задать ширину. По сути мой код подразумевает что основной блок этих трех блоков row стоит в контейнере который в свою очередь имеет уже свою ширину