@Mr-Freeman

Как реализовать 3 резиновых блока с фиксированными отступами?

В общем, столкнулся с такой проблемой при верстке адаптивного сайта. Ширина сайта плавает в диапазоне от 320 до 1600px. Имеются 3 блока. Необходимо, чтобы эти блоки занимали всю предоставленную область и при этом имели одинаковые ширину(auto) и интервалы(30px). При уменьшении размера окна блоки должны сжиматься по ширине, а отступы оставаться неизменными.

Реализация без flexbox'a.

Нужна Ваша помощь, уважаемые форумчане! Буду очень благодарен, если поможете!

5ae6c6a2c3e34738396362.png5ae6c6a917e58228635939.png
  • Вопрос задан
  • 137 просмотров
Решения вопроса 1
rockon404
@rockon404
Frontend Developer
.row {
  margin: 0 -15px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.col {
  float: left;
  width: 33.33333%;
  padding: 0 15px;
}


<div class="row">
  <div class="col">
    <div class="your-blue-div">div1</div>
  </div>
  <div class="col">
    <div class="your-blue-div">div2</div>
  </div>
  <div class="col">
    <div class="your-blue-div">div3</div>
  </div>
</div>

где .your-blue-div - ваш блок.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы