上午/下午/晚上，
我对PHP很在行。我终于找到了连接/提取我想要的信息的工具。
我使用css设置了一个由3张卡组成的网格。
我拉图片/网址，姓名，年龄，国家。
现在，当我加载页面时，所有三张卡片都包含完全相同的信息。
示例：
第页：
本，本
珍娜珍娜珍娜珍娜
史蒂文史蒂文史蒂文
我想要的是：
第页：
本·詹娜·史蒂文
这是我的PHP，下面是css。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Covid-Deaths</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://kit.fontawesome.com/1f285a5a86.js" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>You're terrible at this</h1>
<p>Get each picture to be unique</p>
<?php
//database Connection
include 'dbconfig.php';
// retrieving data from table accounts
$query = "SELECT * FROM test_info";
$result = mysqli_query($conn, $query);
?>
<?php
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
?>
<div class="grid-container">
<div class ="card">
<a href="<?php echo $row['obit_url']; ?>"><img src="uploaded-images/<?php echo $row['picture'];?>" width="80%"/></a>
<h4><?php echo $row['names']; echo ", "; echo $row['age'];?></h4>
<p><?php echo " "; echo "State: "; echo $row['state']; ?></p>
</div>
<div class ="card">
<a href="<?php echo $row['obit_url']; ?>"><img src="uploaded-images/<?php echo $row['picture'];?>" width="80%"/></a>
<h4><?php echo $row['names']; echo ", "; echo $row['age'];?></h4>
<p><?php echo " "; echo "State: "; echo $row['state']; ?></p>
</div>
<div class ="card">
<a href="<?php echo $row['obit_url']; ?>"><img src="uploaded-images/<?php echo $row['picture'];?>" width="80%"/></a>
<h4><?php echo $row['names']; echo ", "; echo $row['age'];?></h4>
<p><?php echo " "; echo "State: "; echo $row['state']; ?></p>
</div>
</div>
</div>
<?php
}
}
?>
</body>
</html>
还有CSS
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
}
再说一次，我在这方面是个新手，不知道如何用谷歌搜索确切的单词。非常感谢您的帮助。
当循环内改变你的代码如下：
<?php
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
?>
<div class="grid-container">
<div class ="card">
<a href="<?php echo $row['obit_url']; ?>"><img src="uploaded-images/<?php echo $row['picture'];?>" width="80%"/></a>
<h4><?php echo $row['names']; echo ", "; echo $row['age'];?></h4>
<p><?php echo " "; echo "State: "; echo $row['state']; ?></p>
</div>
<?php
}
}
?>
因为您在一张卡中拥有所有的状态、名称、年龄、图像所有信息，并且您在一个时间循环中拥有该代码，所以您不需要其他卡。
$query = "SELECT * FROM test_info";
因此，如果上述查询结果返回的行数超过1行，则会自动生成多张卡片，并在其中加载信息。
移除额外的2卡容器，因为您正在使用循环。为了更好地理解如何使用php和mysql获取数据，请尝试本教程https://www.tutorialrepublic.com/php-tutorial/php-mysql-crud-application.php
