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

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

Ответ

Вариант с 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; }