Php css水平显示图像

我试图用php垂直显示每行5幅图像，我已经做到了。 我还使用了一个div，这似乎造成了一个问题。 图像水平显示，但每个图像之间似乎有一个巨大的空间

下面是php代码：

<table width="500" border="0" cellpadding="2" cellspacing="3">
    <tr>
    <?php
    // get the images for the new videos

    $query = "SELECT * FROM videos";
    $result = mysql_query($query);
    $numimages = 0;
    while ($row = mysql_fetch_assoc($result)) {
        extract($row);
        // extract youtube id

        preg_match('/[\\?\\&]v=([^\\?\\&]+)/', $video_link,$matches);
        // $matches[ 1 ] should contain the youtube id
    ?>
        <td valign="top">
            <div id="videogallery">
                <a rel="#voverlay" href="http://www.youtube.com/v/<?php echo $matches[ 1 ];?>?autoplay=1&amp;rel=0&amp;enablejsapi=1&amp;playerapiid=ytplayer" title="<?php echo $video_title;?>">
                    <img src="http://img.youtube.com/vi/<?php echo $matches[ 1 ];?>/default.jpg" alt="<?php echo $video_title;?>" class="border_black" />
                </a>
            </div> 
        </td>
        <?php 
        $numimages++;
        if ($numimages%3 == 0) 
            echo "</tr><tr>";
    }
    ?>
    </tr>
</table>

两者之间似乎有一个巨大的空间 每个缺口

你是说7像素的间距吗

<table width="500" border="0" cellpadding="2" cellspacing="3">

两者之间似乎有一个巨大的空间 每个缺口

你是说7像素的间距吗

<table width="500" border="0" cellpadding="2" cellspacing="3">

---

我注意到了一些事情。首先，ID在html中必须是唯一的，但它们不在文档中。在循环中创建

，以便id多次出现。您应该将

id

更改为

class

（或者完全删除

div

）

另外，

#videogallery

的宽度设置为500像素，这也是包含表格的宽度。如果计划将5个图像相邻，则div（或图像）的宽度不应超过100 px。缩小宽度应有助于缩小图像之间的间距

---

使用表格进行布局通常不是一个好主意，在没有表格的情况下应该可以获得相同的效果。这给了你更多的灵活性。（确定每行图像的数量应该是布局问题，而不是代码问题。）

我注意到了一些事情。首先，ID在html中必须是唯一的，但它们不在文档中。在循环中创建

，以便id多次出现。您应该将

id

更改为

class

（或者完全删除

div

）

另外，

#videogallery

的宽度设置为500像素，这也是包含表格的宽度。如果计划将5个图像相邻，则div（或图像）的宽度不应超过100 px。缩小宽度应有助于缩小图像之间的间距

使用表格进行布局通常不是一个好主意，在没有表格的情况下应该可以获得相同的效果。这给了你更多的灵活性。（确定每行图像的数量应该是布局问题，而不是代码问题。）

您可以通过使用div和css

float
来避免所有问题参见此

参见
您可以通过使用div和css
float来避免
所有的问题参见此

参见
90%的代码是完全冗余的

您不需要这些表（事实上，现在在这样的布局中使用它们被认为是非常糟糕的做法），也不需要图像周围的包装器
元素

您的
标记已使用
显示：内联块设置样式，所以实际上他们应该已经水平排列了，没有这些东西。只要把它们放在一起，没有多余的垃圾，它们就会很高兴地为你排队。您可以使用
margin
和
padding
在它们之间添加您需要的任何额外间距

除此之外，您只需在整个地块周围放置一个单独的包装器，以对整个地块实施固定的
宽度
，以便它们在正确的点处缠绕到新行上

希望能有所帮助。
90%的代码是完全冗余的

您不需要这些表（事实上，现在在这样的布局中使用它们被认为是非常糟糕的做法），也不需要图像周围的包装器
元素

您的
标记已使用
显示：内联块设置样式，所以实际上他们应该已经水平排列了，没有这些东西。只要把它们放在一起，没有多余的垃圾，它们就会很高兴地为你排队。您可以使用
margin
和
padding
在它们之间添加您需要的任何额外间距

除此之外，您只需在整个地块周围放置一个单独的包装器，以对整个地块实施固定的
宽度
，以便它们在正确的点处缠绕到新行上

希望能有所帮助。
你的php代码与此无关；浏览器（查看源代码）看到的呈现html是什么？应避免使用
extract（）
。它与register_globals和magic_quotes_gpc一起排列在“愚蠢的PHP”列表中。使用表格进行这种布局是非常古老的skool HTML<代码>显示：-moz内联堆栈
是不必要的，除非你想支持Firefox2（有多少人还在使用它？？），同意@David：我们不需要看PHP代码；这与问题无关。向我们展示从浏览器“查看源代码”时获得的代码。@Spudley，嗯，是的。我就是这么说的，不是吗？@大卫：是的；我说我同意你的意见（只是想把这一点弄清楚！；）你的php代码是不相关的；浏览器（查看源代码）看到的呈现html是什么？应避免使用
extract（）
。它与register_globals和magic_quotes_gpc一起排列在“愚蠢的PHP”列表中。使用表格进行这种布局是非常古老的skool HTML<代码>显示：-moz内联堆栈
是不必要的，除非你想支持Firefox2（有多少人还在使用它？？），同意@David：我们不需要看PHP代码；这与问题无关。向我们展示从浏览器“查看源代码”时获得的代码。@Spudley，嗯，是的。我就是这么说的，不是吗？@大卫：是的；我说我同意你的意见（只是想把这一点弄清楚！；）这是真的，尤其是考虑到他的物品容器有固定的宽度。将项目容器设置为内联块，并添加CSS第n个类型（5）规则，他可以轻松地微调视觉效果，而无需修改代码thnx Arjan，div正在创建一个问题，即循环。我也把桌子移走了。这是真的，尤其是考虑到他的物品容器有固定的宽度。将其项目容器设置为内联块，以及