block example

In general, you need to impose divs so that they are equidistant from each other, all have a fixed width and height (as in the attached image). The problem is that the information in these blocks is derived from the database using php and, accordingly, you need to apply one CSS class for all 3 blocks (shove one block into the loop and further depending on how many materials are in the database, output the required number in blocks). If in the CSS class we set the indent to the right for example 20px, then the 3rd block will move down due to the lack of space on the page width.

If the page were static, then it would be possible to make a wrap to the left at the Left Block and at the Right at the right, and to make an equal indentation on both sides at the central unit depending on the page width. But here it is necessary to prescribe 3 classes for 3 blocks, respectively, but I need to fit everything in one class.

I hope I described the essence of the problem in detail.

  • well, put all the blocks "float: left; display: inline-block", they will be placed in a line in turn. - andrew68
  • Well, the distance between these blocks will not be the same, more precisely, there will be no indenting at all - xenon
  • @xenon, if the block sizes are really fixed and it is necessary to place them from edge to edge of the parent block at different numbers, while setting equal indents, then using some css tools, and even more so with one class, this will not be possible. And if we take into account that the size of the viewed area will differ significantly among different users, then under such conditions, it is time to use js. Calculate the total available width, subtract the total width of the blocks that will be in one line and split the remaining width to the margin between them. - Deonis
  • There are a couple of ways to solve this problem. It is only necessary to clarify the trace. moments: 1. Is the wrapper block width of these divs fixed or rubber? 2. Will the blocks be displayed three in a row? Or in the last row can there be two blocks, and one? And if there are two blocks, how should they be located (on the position of the 1st and 2nd or 1st and 3rd blocks)? - Otono Like

3 answers 3

Well, you can do something like this. Set styles:

.block {margin-right: 20px;} .last {margin-right: 0px;}

Further, on a cycle:

 $count = 1; while () { // это ваш Ρ†ΠΈΠΊΠ» echo '<div class="block '.$newclass.'">ВСкст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ выводится ΠΈΠ· запроса ΠΊ Π‘Π”</div>'; //Π² ΠΊΠΎΠ½Ρ†Π΅ Ρ†ΠΈΠΊΠ»Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ΠΌΡƒ Π±Π»ΠΎΠΊΡƒ Π·Π°Π΄Π°Π΅ΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ класс last if ($count == 3) {$newclass = 'last'; $count = 1;} else {$newclass = ''; $count++;} }
  • and who, interestingly, came up with pseudo-classes -: last-child .block div {margin-right: 20px; display: inline-block;} .block div: last-child {margin-right: 0px;} <div class = "block "> <div> 1 </ div> <div> 2 </ div> <div> 3 </ div> <div> 4 </ div> <div> 5 </ div> </ div> and without any IF 's. - andrew68
  • every third person needs to set margin-right: 0px ;, but this is not at all: last-child - NoName
  • one
    then className:nth-of-type(3n) { margin-right: 0px; } className:nth-of-type(3n) { margin-right: 0px; } - ferrari

Sometimes I wrap these many blocks of yours and point it to text-align: center . And the blocks themselves inside, respectively, display: inline-block .

    Example 1 - Using text-align: justify

     * { padding: 0; margin: 0; box-sizing: border-box; } div { text-align: justify; font-size: 0; } div:after { width: 100%; height: 0; visibility: hidden; overflow: hidden; content: ''; display: inline-block; } div > div { background: #ссс; width: 100px; height: 100px; display: inline-block; text-align: left; border: 1px solid #000; line-height: normal; font-size: 14px; vertical-align: top; } 
     <div> <div>1</div> <div>2</div> <div>3</div> </div>

    Example 2 - Using display: flex and justify-content: space-between

     *{ padding: 0; margin: 0; box-sizing: border-box; } .wrap { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-justify-content:space-between; /*Chrome */ justify-content: space-between; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .wrap > div { width: 100px; border: 1px solid black; background: #fff; height: 100px; } 
     <div class="wrap"> <div>box 1</div> <div>box 2</div> <div>box 3</div> </div>