Адаптивная верстка на три блока

246

23 марта 2017, 20:15

Нужно такое сформировать:

Посередине блок, равный фиксированной ширине. Должен быть четко по центру страницы.
Слева и справа блоки, они растягиваются по всей оставшейся ширине страницы.

Как такое сделать, не применяя flex (сразу тяжелее стало, да?)?

Я додумался только сформировать два слоя: на первом будет центральный блок, он и будет позиционироваться по центру с помощью margin: auto.
А остальные два будут занимать width: 50%, но находится под ним и таким образом создаться ощущение адаптивности.
Но хотелось бы без костылей. Я о таком потом могу пожалеть просто... По той же причине нельзя использовать флексы.

Answer 1

.table { 
  display: table; 
  width: 100%; 
  height: 100px; 
} 
 
.left { 
  display: table-cell; 
  width: -webkit-calc(50% - 340px); 
  width: -moz-calc(50% - 340px); 
  width: calc(50% - 340px); 
  background: yellow; 
} 
 
.center { 
  display: table-cell; 
  width: 680px; 
  background: magenta; 
} 
 
.right { 
  display: table-cell; 
  width: -webkit-calc(50% - 340px); 
  width: -moz-calc(50% - 340px); 
  width: calc(50% - 340px); 
  background: yellow; 
}

<div class="table"> 
  <div class="left"></div> 
  <div class="center"></div> 
  <div class="right"></div> 
</div>

Answer 2

Можно обычными флоатами и при помощи свойства width: calc((100% - 500px) / 2) для боковых элементов.

* { 
  box-sizing: border-box; 
} 
 
body { 
  margin: 0; 
} 
 
.container:after { 
  content: ''; 
  clear: both; 
  display: block; 
} 
 
.side { 
  width: calc((100% - 500px) / 2); 
  float: left; 
  min-height: 200px; 
  background-color: #ccc; 
} 
 
.center { 
  float: left; 
  background-color: #000; 
  min-height: 200px; 
  width: 500px; 
  margin: auto; 
} 
 
.center--nofloat { 
  float: none; 
}

<div class=container> 
  <div class="center center--nofloat"></div> 
</div> 
<br> 
<div class=container> 
  <div class=side></div> 
  <div class=center></div> 
  <div class=side></div> 
</div>

Создание интернет-магазина спортивных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Когда отключен denwer не работает Mysql

Я всегда без без проблем подключался к базам данных на своем компьютере по localhost через любые программы по типу navicat или просто через терминал...

262

MySQL