3

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

введите сюда описание изображения

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

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

2
  • ты хочешь тег table
    – Grundy
    12 сен 2016 в 6:56
  • 1
    display: flex / table - table-cell 12 сен 2016 в 6:57

2 ответа 2

4

вариант с 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;
}
<div class="b">
  <div class="b-item">Другими словами, ширина каждого из n блоков внутри контейнера без учёта отсупов равна ParentWidth/n для любых ширин родителя Parent Width.</div>
  <div class="b-item">Другими словами, ширина каждого из n блоков внутри контейнера без учёта отсупов равна ParentWidth/n для любых ширин родителя Parent Width.Другими словами, ширина каждого из n блоков внутри контейнера без учёта отсупов равна ParentWidth/n для любых ширин родителя Parent Width.</div>
  <div class="b-item">Другими словами, ширина каждого из n блоков внутри контейнера без учёта отсупов равна ParentWidth/n для любых ширин родителя Parent Width. Другими словами, ширина каждого из n блоков внутри контейнера без учёта отсупов равна ParentWidth/n для любых ширин родителя Parent Width. Другими словами, ширина каждого из n блоков внутри контейнера без учёта отсупов равна ParentWidth/n для любых ширин родителя Parent Width.</div>
</div>

0

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

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

.container {
  width: 100%;
}

.column {
  float: left;
  padding: 0 10px;
  width: 33.33%;
}
2
  • Так в проблеме n блоков а не 3 12 сен 2016 в 7:01
  • 1
    @ArtemGorlachev, для n ,` .column { width: 100%/n ; }`
    – SVE
    12 сен 2016 в 7:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.