0
$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>";             
}

при помощи цикла выводим 3 статьи в ряд , а потом делаем 3 статьи на след ряду и так далее...как этот переход осуществить ? думаю что при помощи if , но я чет туплю и не знаю что внутри написать ..помогите, заранее спасибо

2
  • Это делается на CSS 8 окт 2018 в 16:03
  • ок , а как ?...реально туплю сегодня 8 окт 2018 в 16:14

1 ответ 1

0

Это делается через CSS. Вариантов как это сделать множество.

Можно использовать Bootstrap (фреймворк).

Можно использовать CSS GRID

Можно написать на чистом CSS

В таком случае ваш PHP будет вот таким:

<?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 }

Например:

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

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

12
  • я попробовал эти способы соединить с моим кодом ... он не меняет нечего. как было в строчку так и есть 8 окт 2018 в 17:11
  • Удалите свои стили, добавьте стили CSS с ответа. Посмотрите структуру HTML вывода вашего когда, совпадает ли она с той и что в ответе 8 окт 2018 в 17:44
  • ok. спасибо за помощь. попробуем 8 окт 2018 в 17:45
  • Если код работает тут но не работает у вас, значит дело в вас. Проанализируйте стили css, может в вашем коде прописано чтобы блоки выводились только в строку. 8 окт 2018 в 17:46
  • Если есть возможность выложите весь код или ссылку на ресурс 8 окт 2018 в 17:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.