Hello, I only teach html and css, I took a random psd from the Internet to try to impose it and I just can’t figure out how to place 3 blocks so that each of them is exactly in the middle of 1/3 of the screen horizontally, regardless of resolution ? I would be very grateful for the help.

    3 answers 3

    Option with 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>

    Example 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>

    Example with 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>

    Example with 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>

    • Thank you so much! - Farianit

    Something like this.

     * { -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%; } 
     <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>

      1) Option with table

       .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) Option with 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>

      At the same time, the width is not indicated here , and more than 3x can be placed.