$i=0; while($i<count($news)){ if ($i++%3==0) { echo "<br />";//переход на другую строчку } echo "<article>"; echo '<div id="img_div"> <img src="/images/'.$news[$i]["image"].'" > <p>'.$news[$i]['intro_text'].'</p> </div>'; echo "</article>"; }

with the help of a cycle, we draw 3 articles in a row, and then we make 3 articles on the next row, and so on ... how to make this transition? I think that with the help of if, but I even stupid and do not know what to write inside .. help, thanks in advance

  • This is done on CSS - Daniel
  • ok, but how? ... really stupid today - Sasuke Uchiha

1 answer 1

This is done through CSS. Options for how to do this set.

You can use Bootstrap (framework) .

You can use CSS GRID

You can write in pure CSS

In this case, your PHP will be like this:

 <?php $i=0; while($i<count($news)){ ?> <article> <div id="img_div"> <img src="/images/<?php echo $news[$i]["image"];?>" > <p><?php echo $news[$i]['intro_text']; ?></p> </div> </article> <?php }

For example:

Option 1 :

 body { margin: 10px; } img { max-width: 100%; margin: 0 auto; } article { background-color: #444; color: #fff; border-radius: 5px; padding: 20px; width: 100%; max-width: 25%; display: inline-block; margin: 20px 5px; } div#img_div { margin: 0 auto; display: table; } 
 <div class="wrapper"> <article> <div id="img_div"> <img src="https://picsum.photos/200/300/?random?gravity=center" title="Картинка с БД" > <p>Произвольный текст с БД</p> </div> </article> <article> <div id="img_div"> <img src="https://picsum.photos/200/300/?random?gravity=north" title="Картинка с БД" > <p>Произвольный текст с БД</p> </div> </article> <article> <div id="img_div"> <img src="https://picsum.photos/200/300/?random?gravity=east" title="Картинка с БД" > <p>Произвольный текст с БД</p> </div> </article> <article> <div id="img_div"> <img src="https://picsum.photos/200/300/?random?gravity=south" title="Картинка с БД" > <p>Произвольный текст с БД</p> </div> </article> <article> <div id="img_div"> <img src="https://picsum.photos/200/300/?random?gravity=west" title="Картинка с БД" > <p>Произвольный текст с БД</p> </div> </article> <article> <div id="img_div"> <img src="https://picsum.photos/200/300/?random?gravity=center" title="Картинка с БД" > <p>Произвольный текст с БД</p> </div> </article> </div>

Option 2 :

 * { box-sizing: border-box; } /* Create four equal columns that floats next to each other */ .column { float: left; width: 25%; padding: 10px; height: 300px; /* Should be removed. Only for demonstration */ } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } 
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> </style> </head> <body> <div class="row"> <div class="column" style="background-color:#aaa;"> <h2>Колонка 1</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Колонка 2</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ccc;"> <h2>Колонка 3</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ddd;"> <h2>Колонка 4</h2> <p>Some text..</p> </div> </div> </body> </html>

  • I tried these methods to connect with my code ... it does not change nothing. as it was in the line it is - Sasuke Uchiha
  • Delete your styles, add CSS styles from the answer. Look at the structure of your HTML output when, if it coincides with the one and that in response - Daniel
  • ok. thanks for the help. try - Sasuke Uchiha
  • If the code works here but does not work for you, then it means you. Analyze css styles, it may be written in your code so that blocks are displayed only in a string. - Daniel
  • If you can put all the code or link to the resource - Daniel