php - 从 SQL 表中提取照片和照片 ID 并将它们显示在 PHP 页面上的列表中

Question

我有一个包含 ID、photourl 和 thumbnailurl 的 SQL 表。现在我写了一个删除照片的脚本。一切正常，我想在列表中显示图像：

如您所见，我想将照片和删除链接放在一个列表项中。

<ul>
    <li>
        <ul>
            <li><img src="#"/></li>
            <li><a href="#"> DELETE IMAGE </a></li>
        </ul>
    </li>

    <li>
        <ul>
            <li><img src="#"/></li>
            <li><a href="#"> DELETE IMAGE </a></li>
        </ul>
    </li>
</ul>

我写了一些代码，但它似乎不起作用......它在列表中垂直显示照片。

<ul >
<li>
<?php
    while ($line = $db->fetchNextObject()) {
        //echo '<li>';
            echo '<ul>';
                echo '<li> <img class="thumb_image '.$line->category.'" src="'.$line->minurl.'"/> </li>';
                echo '<li>  <a href="index.php?remove=true&id='.$line->id.'">Verwijder</a> </li>';
            echo '</ul>';
        //echo '</li>';
        /*echo '<img class="thumb_image '.$line->category.'" src="'.$line->minurl.'"/> <br/> <a href="index.php?remove=true">Verwijder</a> ';
    */
    }

    
?>
</li>
</ul>

Answer 1

尝试像这样设置您的 HTML：

<ul>
   <li><img src="#"/><a href="#" class="deleteImage"> DELETE IMAGE </a></li>
 </ul>

然后你的CSS如下：

.deleteImage { display: block; }​

这将允许您操作您希望删除图像文本在图像下方显示的位置。

Answer 2

一种方法来做到这一点......使用<table>，<li> 这会给你一个粗略的想法..尝试类似..

<table>
  <ul>
    <tr>
      <td><li> row1 - column1 (1,1) </li></td>
      <td><li> row1 - column2 (1,2) </li></td>
    </tr>
    <tr>
      <td><li> row2 - column1 (2,1) </li></td>
      <td><li> row2 - column2 (2,2) </li></td>
    </tr>
  </ul>
</table>

休息你可以弄清楚自己..

Answer 3

有时，您需要的是一张表格，但它不必看起来像：

CSS：

table {
    display: block;
}

tr {
    display: inline-block;
    border: 1px solid;
    margin: 1em;
}

td {
    display: block;
    text-align: center;
}

img {
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

HTML：

<table>
    <tr>
        <td><img /></td>
        <td><a href="#">Delete</td>
    </tr>

    <tr>
        <td><img /></td>
        <td><a href="#">Delete</td>
    </tr>
</table>

http://jsfiddle.net/52yTm/

您可以添加额外的列，例如谁上传了它或拍摄照片的时间等，并且设置这些样式是有意义的。

列表列表对我来说似乎不合适。在我看来，清单应该是类似的东西（杂货清单、颜色清单等）。图像和删除按钮是具有关系的不同项目（“删除”删除关联的图像）。用表格更好地表达关系。