Я видел много решений здесь, на Stack, но никто не работает для меня, поэтому я пытаюсь написать его, основываясь на том, что я вижу, как делают другие.
Im умеет подсчитывать столбцы и запускать новую строку, но проблема в том, что, делая это в foreach (получение данных из БД), теперь она будет помещать каждую запись из БД 4 раза -> закрыть строку; запустите новую строку-> и покажите вторую запись из БД 4 раза -> закройте строку; запустите новую строку-> и покажите третью запись из БД 4 раза и т. д. … (мой код находится в нижней части этого сообщения)
Итак, прямо сейчас этот код отображает такие элементы, как:
col-md3(item1) | col-md3(item1) | col-md3(item1) | col-md3(item1) col-md3(item2) | col-md3(item2) | col-md3(item2) | col-md3(item2) .... .... однако я хочу, чтобы он отображался следующим образом:
col-md3(item1) | col-md3(item2) | col-md3(item3) | col-md3(item4) col-md3(item5) | col-md3(item6) | col-md3(item7) | col-md3(item8) .... | ... | .... | .... ....
Мой код прямо сейчас:
foreach($data as $row) { echo '<div class="row">'; for ($i=0; $i<4;$i++){ if ($i%4 == 0 && $i != 0){ echo '</div><div class="row">'; } echo '<div class="col-md-3">'; ?> <!-- Ecommerce UI #2 --> <div class="ecom-ui ecom-ui-two"> <div class="img-container"> <!-- Product Image --> <a href="#"><img class="img-responsive" src="img/product/<?php echo $row[thumbimage]; ?>" alt="" /></a> </div> <!-- product details --> <div class="product-details"> <!-- product title --> <h4><a href="#"><?php echo $row[name]; ?></a> <span class="color pull-right">€<?php echo $row[price]; ?></span></h4> <div class="clearfix"></div> <p>Lorem Ipsum is simply dummy text of printing the printing industry.</p> <!-- Price --> <div> <span class="cart"><a href="#">Add to cart</a></span> <!-- Media icon --> <span class="p-media pull-right"> <a href="#" class="b-tooltip" data-placement="top" title="21"><i class="fa fa-heart red"></i></a> <a href="#" class="b-tooltip" data-placement="top" title="49"><i class="fa fa-share-alt red"></i></a> <a href="#" class="b-tooltip" data-placement="top" title="35"><i class="fa fa-thumbs-up red"></i></a> </span> <div class="clearfix"></div> </div> </div> </div> <!-- Ecommerce UI #2 --> <?php echo'</div>'; } echo '</div><br />'; }
При печати кода возникает логическая ошибка. Вам нужен только один цикл, а не вложенный. Измените свой код, как показано ниже:
<?php ..... .... $i=0; echo '<div class="row">'; foreach($data as $row) { echo '<div class="col-md-3">'; ?> <!-- Ecommerce UI #2 --> <div class="ecom-ui ecom-ui-two"> <div class="img-container"><!-- Product Image --> <a href="#"><img class="img-responsive" src="img/product/<?php echo $row[thumbimage]; ?>" alt="" /></a> </div> <!-- product details --><div class="product-details"> <!-- product title --> <h4><a href="#"><?php echo $row[name]; ?></a><span class="color pull-right">€<?php echo $row[price]; ?></span></h4> <div class="clearfix"></div> <p>Lorem Ipsum is simply dummy text of printing the printing industry.</p> <!-- Price --><div> <span class="cart"><a href="#">Add to cart</a></span> <!-- Media icon --><span class="p-media pull-right"> <a href="#" class="b-tooltip" data-placement="top" title="21"><i class="fa fa-heart red"></i></a> <a href="#" class="b-tooltip" data-placement="top" title="49"><i class="fa fa-share-alt red"></i></a> <a href="#" class="b-tooltip" data-placement="top" title="35"><i class="fa fa-thumbs-up red"></i></a> </span> <div class="clearfix"></div> </div> </div> </div> <!-- Ecommerce UI #2 --> </div> <?php $i++; if ($i%4 == 0) echo '</div><div class="row">'; } ?> </div><br />
Логика: нужно перебирать все (каждая) строки в $data , когда цикл выполняется 4 раза, затем разбивает строку (на </div> ) и запускает новую (по <div class="row"> ). Чтобы обработать это, запустите счетчик $i перед циклом с 0 и увеличьте его на 1 после каждого цикла. Когда $i полностью разделяется на 4 тогда echo «замыкание-строка (div) -и-начало-строка (div) -код», т.е. </div><div class="row">