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

#html #css

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

Ответы

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

  

  

  






Пример 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%;
}

  

  

  






Пример с float:



* {
  box-sizing: border-box;
}

.col-3 {
  height: 100px;
  width: 33.333%; 
  background: grey;
  border:1px solid #333;
  float: left;
}

.row {
    overflow: hidden;
}

  

  

  






Пример с 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;
}

  

  

  




Ответ 2

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



* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix {
  clear: both;
  overflow: hidden;
}

.col-3 {
  float: left;
  padding: 0 10px;
  width: 33.333%;
  height: 100px;
}

.border-box {
  border: 1px solid #555555;
  width: 100%;
  height: 100%;
}

  

  

  




Ответ 3

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



.grid {
  width: 100%;
}

.grid td {
  background: red;
}

  

    
блок1
    
блок2
    
блок3
  





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;
}

  
e
  
e
  
e





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