Hello. There is such a mini template. enter image description here

How to correctly make up the three lower div blocks? I did this.

<div style="text-align:center;"> <img src="images/slide.png"/> </div> <div class="block">1</div> <div class="block">1</div> <div class="block">1</div> <div class="block">1</div> <div class="block">1</div> <div class="block">1</div> </div>

CSS

 .block{ border:1px solid #cccccc; width:217px; float:left; margin-right:5px; margin-bottom:20px; height:332px; overflow:hidden; }

But in this case, the most extreme block has an indent.

enter image description here

How to make all blocks evenly spaced?

    5 answers 5

    Option to place the blocks in a container with text-align: justify; . The blocks themselves set display: inline-block . And div.clear at the very bottom to align the last line.

    Here is an example: http://jsfiddle.net/30wn0mu2/1/

      Here is another option

       * { padding: 0; margin: 0; } #container { display: flex; justify-content: space-around; flex-wrap: wrap-reverse; max-width: 1000px; margin: 0 auto; } #container > div { width: 300px; border: 1px solid black; background: #fff; height: 100px; margin: 10px 0; } 
       <div id="container"> <div>box 1</div> <div>box 2</div> <div>box 3</div> <div>box 4</div> <div>box 5</div> <div>box 6</div> </div>

      Option 2

       * { padding: 0; margin: 0; box-sizing: border-box; } #container { max-width: 1000px; margin: 0 auto; overflow: hidden; } #container > div { width: 31%; border: 1px solid black; background: #fff; height: 100px; float: left; margin: 1.167%; } 
       <div id="container"> <div>box 1</div> <div>box 2</div> <div>box 3</div> <div>box 4</div> <div>box 5</div> <div>box 6</div> </div>

        Set the block width via calc() :

         .block { margin-right: 5px; width: calc( 100% / 3 - 5px * 2 / 3 ); } /*каждому третьему блоку убрать отступить справа*/ .block:nth-child(3n){ margin-right: 0; }
        • Minus why? - GeneratorQuality

        If block 3 (as on the template), add the following rule to the style sheet:

         .block:last-child { margin-right: 0; }

        In your code, there are already 6 blocks. You did not describe their behavior, but if they should be arranged in a row in three, then use the pseudo-class :nth-child instead of :last-child

          Well, at least, set the width of the blocks in percent. If they are nested in a block with a fixed width, then simply divide the width of the block by 3

          • and you have an error in the word Medetsinskie - ruslik