显示：内联块无法与PHP一起使用（包括屏幕截图）

Question

我目前正在创建一个电子商务网站。我使用PHP / SQL显示产品信息。

我在CSS中设置了一个display：inline-block，当没有PHP时它似乎工作正常。然而，一旦我放入php，它似乎变成了display：block元素。

这是我的html / php代码：

<section class="products">

    <div class="sectionintro introcontainer">
     <h1>Gucci</h1>
     <p>Established in Florence in 1921, Gucci has evolved from a manufacturer of quality leather accessories into one of the world’s premiere luxury brands. A legacy of glamour, elegance, and modernity underpin its status as a bastion of essential Italian fashion. Alessandro Michele, named creative director in 2015, has ushered in a uniquely contemporary vision of luxury with his eclectic, bohemian, and highly romantic designs. </p>
    </div>



        <article>

        <?php

 $query = "SELECT * FROM products WHERE product_brand = 'Gucci' ";

 $select_all_products = mysqli_query($connection, $query);

 while($row = mysqli_fetch_assoc($select_all_products)){

    $product_id = $row['product_id'];
    $product_name = $row['product_name'];
    $product_type = $row['product_type'];
    $product_image_front = $row['product_image_front'];
    $product_image_back = $row['product_image_back'];
    $product_image_side = $row['product_image_side'];
    $product_image_full = $row['product_image_full'];
    $product_description = $row['product_description'];
    $product_price = $row['product_price'];
    $product_brand = $row['product_brand'];

?>

        <img  src="productImages/<?php echo $product_image_front ?>" >
         <h2><?php echo $product_brand; ?></h2>
          <h3><?php echo $product_name; ?></h3>
          <p><?php echo $product_price; ?></p>
<?php } ?>
</article>
</section>

这是发生的事情的截图：

这是我的CSS：

.products article{
    display:inline-block;
    width:33%;
    text-align: center;
    padding-bottom:60px;
    padding-top:20px;
}

以下是没有PHP的情况：

我的代码中出错了什么？

Answer 1

您已在inline-block - 标记上设置了<article>，这意味着您需要将<article> - 标记放在循环中：

<?php
$query = "SELECT * FROM products WHERE product_brand = 'Gucci' ";
$select_all_products = mysqli_query($connection, $query);

while($row = mysqli_fetch_assoc($select_all_products)){

    $product_id = $row['product_id'];
    $product_name = $row['product_name'];
    $product_type = $row['product_type'];
    $product_image_front = $row['product_image_front'];
    $product_image_back = $row['product_image_back'];
    $product_image_side = $row['product_image_side'];
    $product_image_full = $row['product_image_full'];
    $product_description = $row['product_description'];
    $product_price = $row['product_price'];
    $product_brand = $row['product_brand'];
?>

    <article>
        <img src="productImages/<?php echo $product_image_front ?>" />
        <h2><?php echo $product_brand; ?></h2>
        <h3><?php echo $product_name; ?></h3>
        <p><?php echo $product_price; ?></p>
    </article>

<?php } ?>

目前，您将所有产品放在同一个（且仅限于）<article> - 代码中。