php - 我想通过使用表显示来从 MySQL 数据库检索数据，按照图像中显示的方式排列它

Question

<?php




$con = mysqli_connect("localhost","root","","shady");


    $query = "SELECT * fROM hall1  "; 
$result = mysqli_query($con,$query) or die(mysqli_error());

echo "<form action='food.php' method='post'>";
echo "<table >";

$size = 0;
while($row = mysqli_fetch_array($result)) 
{ 

$imagewidth=200;

if($size > 900)

{
echo"<tr>";
}

echo'<td width='.$td3=100 .'px >  </td>' ;
echo'<td width='.$td1=200 .'px> <label><input type="radio"  name="radii" value='.$row[1].' checked> <img src="'.$row['image'].'" width="200" height="200" style="margin-top:10px;"> </label></td>' ; 


echo"<td width=".$td2=200 ."px> Name &nbsp: " .$row[1]  ."<br> Size &nbsp &nbsp : ".$row[2]  ."Person <br> Price &nbsp &nbsp: ".$row[3]  ." SDG <br> <a href=see.php?id=" . $row['id'] . "> See More </a> </td>";


$size+= $imagewidth+$td1+$td2+$td3;
if($size > 900)

{
echo"<tr>";
}

} 

echo"</table>";

echo "<BR><BR><BR><CENTER><input type='submit'  name='radiii' value='next' width='200PX' height='200PX' ></a> </CENTER></b>";
echo "</form>";
}
?>

Answer 1

您的代码存在很多问题:

1. 尚不清楚变量 size 的含义做。我敢打赌这是不必要的
2. 您正在使用已弃用的代码。 width不再支持 HTML 元素上的属性，如果您坚持使用它，则应仅输入以像素为单位的宽度，而不输入 px像这样:<td width="200"> 。 <center>标签也已被弃用。
3. 您的<label>标签几乎没用。您想用它实现什么目标？
4. 在所有行上设置宽度是一种不好的做法，只需在第一行单元格上设置宽度即可。更好的是，不要直接在 HTML 标签上使用任何样式，而是使用 CSS 规则。

5. 最后，我相信这将是比 echo 更具可读性的代码。 HTML，而是使用以下方法将变量从 PHP“插入”HTML 代码:

    <? $a = "Some variable"; $b = 123; $c = "http://example.com/img/1.png"; ?>
    <p><strong>My variable a: <?=$a?></p>
    <p><strong>My variable b: <?=$b?></p>
    <p><strong>My img: <img src="<?=$c?>"></p>
   

简而言之，将您的 PHP 逻辑包装在 <? 中和?> (请确保您的 PHP 设置中有 short_open_tag = On，否则您需要像您一样使用替代的开始标记 <?php。

编写普通的旧 HTML，无需所有 echo 。每当你想要回显某些内容时，你只需编写一个新的 PHP 开始标签，如下所示: <? echo $a ?>或者，简写版本 <?=$a?>

现在您真正的问题是设计页面。我认为你开始的顺序是错误的。我建议你1- 构建一个可以使用像 Adobe Dreamweaver 这样的 IDE 运行的设计或免费软件替代品。使用该工具，为 1 个项目进行设计(while 循环的 1 次迭代)。

下一步是看看你将如何重复它。您似乎想要一个以一定宽度环绕行的水平列表。一种方法是用 div 包装所有列表项。您将为其设置固定宽度的元素。在里面，您将拥有针对所有项目重复的每个项目的代码。如果您的外div宽度为 900px，每个元素消耗 300px宽度并且您有 9 个项目，您将拥有一个 3x3 网格。

这是我解释的摘要代码。在您的 PHP 文件中，您将拥有:

<div class="grid">
  <? while($row = .... ){ ?>
  <div class="item">
      <!-- The code for the image, label and whatever information you want to have for each item -->
  </div>
  <? } ?>
</div>

以及一个您将链接到 PHP 文件中的 CSS 文件，其中包含:

.grid {
    width: 900px;
}

.item {
    width: 300px;
}

如果您显示的信息来自用户输入，您应该对其进行清理，并使用某种逻辑来破坏长文本，无论是使用 CSS 还是 PHP。

简而言之，您似乎在 PHP 中进行所有数学运算，因此一旦总宽度超过您所需的网格宽度，您就会跳入新行。这是一个设计问题，而不是逻辑/编程问题。因此，您应该使用 CSS 而不是 PHP 来解决这个问题。

我强烈建议您按照视频教程(网上有很多)或按顺序阅读一些有关 HTML、CSS、JavaScript、PHP 和 MySQL 的文档。

以下是帮助您入门的链接:Mozilla Developer Network