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

Posted 2023-02-24

【中文标题】从 SQL 表中提取照片和照片 ID 并将它们显示在 PHP 页面上的列表中

【英文标题】：Pulling photo and photo id from a SQL table and displaying them in a list on a PHP page

【发布时间】：2012-11-07 16:44:40

【问题描述】：

我有一个包含 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>

【问题讨论】：

这是一个css和html的问题。

@KrisTemmerman - 如果您正在寻求 HTML/CSS 解决方案，请发布所有相关的 HTML 和 CSS。

【参考方案1】：

尝试像这样设置您的 HTML：

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

然后你的 CSS 如下：

.deleteImage  display: block; ​

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

【参考方案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>

你可以自己弄清楚..

【参考方案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/

您可以添加额外的列，例如上传者或照片拍摄时间等，并设置合理的样式。

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

【讨论】：

这比我要找的要广泛一些，但这也有效！