Можно ли на чистом HTML и CSS сделать несколько блоков одинаковой, но переменной длины внутри родителя?

#html #css

Можно ли на чистом HTML и CSS добиться того, чтобы блоки имели одинаковую ширину
внутри родителя, но растягивались/сужались по мере растяжения/сужения родительского блока?



Другими словами, ширина каждого из n блоков внутри контейнера без учёта отсупов равна
ParentWidth/n для любых ширин родителя Parent Width.

Если это невозможно на чистом HTML и CSS - так и ответьте и на этом вопрос закроем;
JS-решения пока не требуются. 
    

Ответы

Ответ 1

вариант с display: table

+

table-layout: fixed - таблица делится на колонки равной ширины. Для корректной работы
этого значения обязательно должна быть задана ширина таблицы.



*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.b{
  display: table;
  width: 100%;
  table-layout: fixed;
  height: 150px;
}
.b-item{
  display: table-cell;
  vertical-align: top;
  border: 2px solid #ccc;
}

  
Другими словами, ширина каждого из n блоков внутри контейнера
без учёта отсупов равна ParentWidth/n для любых ширин родителя Parent Width.
  
Другими словами, ширина каждого из n блоков внутри контейнера
без учёта отсупов равна ParentWidth/n для любых ширин родителя Parent Width.Другими
словами, ширина каждого из n блоков внутри контейнера без учёта отсупов равна ParentWidth/n
для любых ширин родителя Parent Width.
  
Другими словами, ширина каждого из n блоков внутри контейнера
без учёта отсупов равна ParentWidth/n для любых ширин родителя Parent Width. Другими
словами, ширина каждого из n блоков внутри контейнера без учёта отсупов равна ParentWidth/n
для любых ширин родителя Parent Width. Другими словами, ширина каждого из n блоков
внутри контейнера без учёта отсупов равна ParentWidth/n для любых ширин родителя Parent
Width.



Ответ 2

Один из вариантов - задать для внутренних блоков ширину в процентах и расположить
колонки в ряд с помощью float: left.

Например так:

.container {
  width: 100%;
}

.column {
  float: left;
  padding: 0 10px;
  width: 33.33%;
}