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

Question

[Mr-Freeman]

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

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

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

Answer 1

[Антон Спирин]

.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 - ваш блок.

Comments

[Mr-Freeman]

Я только учусь верстать, так что не стоит говорить про компетенции.
Проблема в том, что один блок съезжает.


Если не трудно, покажите пожалуйста результат, может я неправильно что-то делаю.

[Антон Спирин]

Mr-Freeman, видимо у вас не выставлен box-sizing:

*, 
*:before,
*:after {
  box-sizing: border-box;
}

Ну раз вы говорите, что учитесь, так учитесь, изучите, например, любой учебник по адаптивной верстке от корки до корки. Иначе нормальных знаний у вас не будет.

[Mr-Freeman]

Антон Спирин, Спасибо!