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

#html #css #вёрстка #div

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

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

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

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


    

Ответы

Ответ 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;
}

  

  

  

  

  






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



.col {
  background: #36a9e0;
  height: 200px;
  width: 19.8%;
  float: left;
}

.col+.col {
  margin-left: .25%;
}

.row {
  overflow: hidden;
}

  

  

  

  

  




Ответ 2

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



article {
  overflow: hidden;
}

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

div + div {
  margin-left: 3px;
}

  

  

  

  

  






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


article {
  display: flex;
  justify-content: space-between;
}

div {
  width: calc((100% - 4*3px) / 5);
  height: 100px;
  background: #ccc;
}

  

  

  

  

  




Ответ 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;
}