如何在php中使用while循环在div中换行?

时间:2018-08-08 17:34:33

标签: javascript php jquery html css

我想在div之后给br标签或hr标签,而我的div在while循环内。请检查下面的代码我在做什么错了。

<?php $count =0;?>
<?php while($product = mysqli_fetch_assoc($featured)) : ?>
<?php $count++;
if($count%4 == 0) {
  ?><br><hr><?php
}

?>

<!-- Number 1 -->
<div class="col-md-3">
  <h6><?= $product['title']; ?></h6>
  <div class="container-fluid">
    <div class="row" style="width:200px;height:200px">
     <img src="<?= $product['image']; ?>" alt="<?= $product['title']; ?>" class="img-thumb" />
    </div>
  </div>
  <hr>
  <p class="list-price text-danger">List Price: <s>$<?= $product['list_price']; ?></s></p>
  <p class="price">Our Price: $<?= $product['price']; ?></p>
  <button type="button" class="btn btn-sm btn-success" onclick = "detailsmodal(<?= $product['id']; ?>)">Deatils</button>
</div>

[在这里,我要在div中显示4个产品之后给br标签,现在我的第5个产品在“详细信息”按钮之后显示。我想在每第5个产品上,或当我的div在另一行显示时,在“详细信息”按钮和标题之间留空格。]

<?php endwhile; ?>

Here between the details button & product title, here Nike sneakers I want to give br tag on every 4 product.

欢迎您提出建议。

2 个答案:

答案 0 :(得分:0)

将条件放在产品div之后,并将您的$count放在条件之后,如下所示:

<?php

$count = 1; 

while($count <= 20) {
    echo "Product ID: $count <br>";
    if($count%4 == 0) echo "<hr>";
    $count++;
}

答案 1 :(得分:0)

您的PHP标记有很多不必要的开头和结尾。看一下使用来自MySQL查询的所有结果的示例:

// Create a counter to store where we're at
$counter = 1;

// Iterate through each product
foreach($products as $product) {
    // Print the HTML markup
    echo '
    <div class="col-md-3">
        <h6>', $product['title'], '</h6>
        <div class="container-fluid">
            <div class="row" style="width: 200px; height: 200px;">
                <img src="', $product['image'], '" alt="', $product['title'], '" class="img-thumb" />
            </div>
        </div>
        <hr />
        <p class="list-price text-danger">List Price: <s>', $product['list_price'], '</s></p>
        <p class="price">Our Price: $', $product['price'], '</p>
        <button type="button" class="btn btn-sm btn-success" onclick = "detailsmodal(', $product['id'], ')">Deatils</button>
    </div>';

    // Print the line/horizontal rulers
    if($counter % 4 === 0) {
        echo '<br /><hr />';
    }

    // Increment the counter
    $counter++;
}

提琴:Live Demo

更新 阅读评论后,您需要使用.card-columns类来布局产品库。看一下这个示例,该示例不需要保留计数器:

<?php    
// Print the containing card-columns
echo '<!-- beginning of card gallery -->
<div class="card-columns mt-3">';

// Iterate through each product
foreach($products as $product) {
    // Print the HTML markup
    echo '
  <div class="card">
    <img src="', $product['image'], '" alt="', $product['title'], '" class="card-img-top" />
    <div class="card-body">
      <h5 class="card-title">', $product['title'], '</h5>
      <p class="card-text text-danger">List Price: <s>', $product['list_price'], '</s></p>
      <p class="card-text">Our Price: <s>', $product['price'], '</s></p>
      <button type="button" class="btn btn-sm btn-success", onclick="detailsmodal(', $product['id'], ')">Deatils</button>
    </div>
  </div> <!-- end of single product -->';
}

echo '
</div> <!-- end of product gallery -->';
?>

提琴:Live Demo