Как разместить 3 блока равномерно?

351

26 июня 2017, 18:03

Здравствуйте, я только учу html и css, взял из интернета рандомный psd, чтобы попробовать его сверстать и никак не могу понять как можно разместить 3 блока так, чтобы каждый из них был ровно по середине 1/3 экрана по горизонтали, вне зависимости от разрешения? Буду очень благодарен за помощь.

Answer 1

Вариант с flex:

* { 
  box-sizing: border-box; 
} 
 
.col-3 { 
  height: 100px; 
  width: 33.333%; /* Можно задать любую другую ширину блока */ 
  background: grey; 
  margin: .5rem; 
} 
 
.row { 
    display: flex; 
    flex-flow: row nowrap; 
    align-items: center; 
    align-content: center; 
    justify-content: space-between; 
}

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

Пример table:

* { 
  box-sizing: border-box; 
} 
 
.col-3 { 
  height: 100px; 
  width: 33.333%;  
  background: grey; 
  border:1px solid #333; 
  display: table-cell; 
} 
 
.row { 
    display: table; 
    width: 100%; 
}

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

Пример с float:

* { 
  box-sizing: border-box; 
} 
 
.col-3 { 
  height: 100px; 
  width: 33.333%;  
  background: grey; 
  border:1px solid #333; 
  float: left; 
} 
 
.row { 
    overflow: hidden; 
}

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

Пример с inline-block:

* { 
  box-sizing: border-box; 
} 
 
.col-3 { 
  height: 100px; 
  width: 33.333%;  
  background: grey; 
  border:1px solid #333; 
  display: inline-block; 
} 
 
.row { 
  font-size: 0px; 
}

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

Answer 2

Примерно вот так.

* { 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
} 
 
.clearfix { 
  clear: both; 
} 
 
.col-3 { 
  float: left; 
  padding: 0 10px; 
  width: 33.333%; 
  height: 100px; 
} 
 
.border-box { 
  border: 1px solid #555555; 
  width: 100%; 
  height: 100%; 
}

<div class="clearfix"> 
  <div class="col-3"><div class="border-box"></div></div> 
  <div class="col-3"><div class="border-box"></div></div> 
  <div class="col-3"><div class="border-box"></div></div> 
</div>

Answer 3

1) Вариант с таблицей

.grid { 
  width: 100%; 
} 
 
.grid td { 
  background: red; 
}

<table class="grid" border="0"> 
  <tr> 
    <td>блок1</td> 
    <td>блок2</td> 
    <td>блок3</td> 
  </tr> 
</table>

2) Вариант с flexbox

#flexbox { 
  display: -webkit-flex; 
  display: -moz-flex; 
  display: -ms-flex; 
  display: -o-flex; 
  display: flex; 
  flex-direction: row; 
} 
 
#flexbox .item { 
  flex: 1 0 auto; 
  background: red; 
  margin: 10px; 
}

<div id="flexbox"> 
  <div class="item">e</div> 
  <div class="item">e</div> 
  <div class="item">e</div> 
</div>

При этом ширина здесь не указывается тем самым можно разместить и больше 3x

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

Все вопросы

ТОП-10

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

Верстка блока, как реализовать?

Здравствуйте, верстаю для себя, учусьПочти закончил верстать макет, осталась одна секция и я не знаю как ее реализовать

272

HTML

Как сверстать данный элемент?

Как сверстать такой элемент, чтобы линия была на всю ширину?

266

HTML

Растянуть блок на всю высоту экрана

Не могу понять, блок внутри body не растягивается на всю высоту экрана, пробовал min-height: 100% / 100vh

573

HTML

Display Block По времени

Привет всем

441