我正在做一个动态网站。产品是从后端添加的。在我的主页中，我有 5 个部分用于展示产品。单击特定部分时，应仅显示其产品。
问题是当我在特定类别下添加多个产品时，产品的图像彼此重叠。有人可以帮助我吗？
The second image of each category is going under the first image
<section id="services">
<div class="container">
<header class="section-header wow fadeInUp">
<h3>Products</h3>
<section id="portfolio" class="section-bg" >
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul id="portfolio-flters">
<li data-filter="*" class="filter-active">All</li>
<li data-filter=".filter-app">Tiles</li>
<li data-filter=".filter-card">Sanitary Ware</li>
<li data-filter=".filter-web">Plumbing</li>
<li data-filter=".filter-web1">Electrical</li>
</ul>
</div>
</div>
<div class="row portfolio-container">
<!--tiles-->
<div class="col-lg-4 col-md-6 portfolio-item filter-app wow fadeInUp" data-wow-delay="0.2s">
<div class="portfolio-wrap">
<figure>
<?php
require_once("admin/config/connection.php");
$proname="";
$pid="";
$query1="select * from products where protype='Tiles'";
$resource1=mysql_query($query1,$connection);
$result1="";
$id="";
while($record=mysql_fetch_array($resource1))
{
$pid=$record['pid'];
$img="uploads/".$record['proimg'];
$proname=$record['proname'];
$result1.="<div class='col-lg-4 col-md-4 col-sm-4 col-xs-12'>
<img src='$img'>
</div>";
}
?>
<div class="img-fluid">
<?php echo $result1;?>
</div>
<!--<img src="img/t2.jpg" class="img-fluid" alt="">
<a href="img/t2.jpg" class="link-preview" data-lightbox="portfolio" data-title="Tile" title="Preview"><i class="ion ion-eye"></i></a>
-->
</figure>
<div class="portfolio-info">
<h4><a href="#">Tile</a></h4>
</div>
</div>
</div>
<!--tiles-->
<!--sanitary wares-->
<div class="col-lg-4 col-md-6 portfolio-item filter-card wow fadeInUp">
<div class="portfolio-wrap">
<figure>
<?php
require_once("admin/config/connection.php");
$proname="";
$pid="";
$query1="select * from products where protype='Sanitary Ware'";
$resource1=mysql_query($query1,$connection);
$result1="";
$id="";
while($record=mysql_fetch_array($resource1))
{
$pid=$record['pid'];
$img="uploads/".$record['proimg'];
$proname=$record['proname'];
$result1.="<div class='col-lg-4 col-md-4 col-sm-4 col-xs-12'>
<img src='$img'>
</div>";
}
?>
<div class="img-fluid">
<?php echo $result1;?>
</div>
<!--<img src="img/s3.jpg" class="img-fluid" alt="">
<a href="img/s3.jpg" class="link-preview" data-lightbox="portfolio" data-title="Sanitary ware" title="Preview"><i class="ion ion-eye"></i></a>
-->
</figure>
<div class="portfolio-info">
<h4><a href="#">Sanitary ware</a></h4>
</div>
</div>
</div>
<!--sanitary wares-->
<!--plumbing-->
<div class="col-lg-4 col-md-6 portfolio-item filter-web wow fadeInUp" data-wow-delay="0.1s">
<div class="portfolio-wrap">
<figure>
<?php
require_once("admin/config/connection.php");
$proname="";
$pid="";
$query1="select * from products where protype='Plumbing'";
$resource1=mysql_query($query1,$connection);
$result1="";
$id="";
while($record=mysql_fetch_array($resource1))
{
$pid=$record['pid'];
$img="uploads/".$record['proimg'];
$proname=$record['proname'];
$result1.="<div class='col-lg-4 col-md-6 mrgn_less prd'>
<img src='$img'>
</div>";
}
?>
<div class="img-fluid">
<?php echo $result1;?>
</div>
<!--<img src="img/p1.jpg" class="img-fluid" alt="">
<a href="img/p1.jpg" class="link-preview" data-lightbox="portfolio" data-title="Plumbing" title="Preview"><i class="ion ion-eye"></i></a>
<!-- <a href="#" class="link-details" title="More Details"><i class="ion ion-android-open"></i></a>-->
</figure>
<div class="portfolio-info">
<h4><a href="#">Plumbing</a></h4>
</div>
</div>
</div>
<!--plumbing-->
<!--electrical-->
<div class="col-lg-4 col-md-6 portfolio-item filter-web1 wow fadeInUp" data-wow-delay="0.1s">
<div class="portfolio-wrap">
<figure>
<?php
require_once("admin/config/connection.php");
$proname="";
$pid="";
$query1="select * from products where protype='Electrical'";
$resource1=mysql_query($query1,$connection);
$result1="";
$id="";
while($record=mysql_fetch_array($resource1))
{
$pid=$record['pid'];
$img="uploads/".$record['proimg'];
$proname=$record['proname'];
$result1.="<div class='col-lg-4 col-md-4 col-sm-4 col-xs-12'>
<img src='$img'>
</div>";
}
?>
<div class="img-fluid">
<?php echo $result1;?></div>
<!--<img src="img/p3.jpg" class="img-fluid" alt="">
<a href="img/p3.jpg" class="link-preview" data-lightbox="portfolio" data-title="Electrical" title="Preview"><i class="ion ion-eye"></i></a>
<!-- <a href="#" class="link-details" title="More Details"><i class="ion ion-android-open"></i></a>-->
</figure>
<div class="portfolio-info">
<h4><a href="#">Electrical</a></h4>
</div>
</div>
</div>
<!--electrical-->
</div>
</div>
</div>
</section>最佳答案
每个框只显示一张图片的最简单方法是将您的查询限制为仅显示每个类别中的第一篇文章。
向每个查询添加 LIMIT 1 即可，IE:
$query1="select * from products where protype='Tiles' LIMIT 1";
请注意，您使用的页面模板不能只显示一个类别中的一种产品，然后在选择过滤器时显示该类别的所有产品。因此，您需要在开始时将所有产品添加到列表中。如果你还需要分类概览，我建议你跳过过滤功能，而是制作两个页面模板。一个产品概览页面仅包含四个类别，另一个模板用于显示每个产品类别，其中包含所有产品。
我可以想出很多方法来改进您的代码，但这不是本文的范围。但是，您真的应该停止使用已弃用的 mysql_* 函数，改用 mysqli 或 PDO。 Why shouldn't I use mysql_* functions in PHP?
关于php - 当我在动态站点中的同一类别下添加产品时，仅显示第一个产品，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49232026/