5 блоков в ряд с плавающей шириной

327

29 марта 2017, 14:46

У меня есть div с width:100% и высотой 200px

Как в него поставить 5 блоков div так, чтобы они занимали весь экран (растягивались, сужались)? - я это решил width:20% каждому блоку, но из нюанса у меня все равно не получилось

Нюанс таков, мне надо, чтобы после первых четырех внутренних дивов был отступ справа пикселя на 3. Из-за этого у меня пятый блок съезжает.

Скрин чего нужно: http://imgur.com/a/XYDLX

Answer 1

Например flex:

.col { 
  background: #36a9e0; 
  height: 200px; 
  width: 20%; 
} 
 
.col+.col { 
  margin-left: 3px; 
} 
 
.row { 
  display: flex; 
  flex-flow: row nowrap; 
  justify-content: space-between; 
}

<div class="row"> 
  <div class="col"></div> 
  <div class="col"></div> 
  <div class="col"></div> 
  <div class="col"></div> 
  <div class="col"></div> 
</div>

Либо можно учесть размер ширины блоков с учетом отступа:

.col { 
  background: #36a9e0; 
  height: 200px; 
  width: 19.8%; 
  float: left; 
} 
 
.col+.col { 
  margin-left: .25%; 
} 
 
.row { 
  overflow: hidden; 
}

<div class="row"> 
  <div class="col"></div> 
  <div class="col"></div> 
  <div class="col"></div> 
  <div class="col"></div> 
  <div class="col"></div> 
</div>

Answer 2

Можно при помощи вычисляемой ширины и селектора +.

article { 
  overflow: hidden; 
} 
 
div { 
  width: calc((100% - 4*3px) / 5); 
  height: 100px; 
  background: #ccc; 
  float: left; 
} 
 
div + div { 
  margin-left: 3px; 
}

<article> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
</article>

Или при помощи флексбокса и вычисляемой ширины:

article { 
  display: flex; 
  justify-content: space-between; 
} 
 
div { 
  width: calc((100% - 4*3px) / 5); 
  height: 100px; 
  background: #ccc; 
}

<article> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
</article>

Answer 3

Вариант с display: table;

*{ 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
.blocks{ 
  display: table; 
  width: 100%; 
  height: 100px; 
  border-spacing: 3px 0; 
  table-layout: fixed; 
} 
.blocks > div{ 
  display: table-cell; 
  vertical-align: top; 
  background: royalblue; 
} 
.blocks > div:nth-of-type(even){ 
  background: tomato; 
}

<div class="blocks"> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
</div>

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

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

Все вопросы

ТОП-10

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

Создайте дизайн молнии

364

HTML

При нажатии escape видеоплеер выходит из полноэкранного режима неверно

Здравствуйте! У меня уже был вопрос по поводу видеоплеера — там мне помогли с нимНо тут образовалась еще одна проблема:

408

HTML

Убрать отступы между background

Есть галерея

359

Обновление поля с текущей датой

Привет! У меня при запуске приложения C# в поле устанавливается текущая датаПланируется, что приложение будет работать бесконечное число...

365