Question

我正在尝试使用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>

这是css：

    #videogallery {
    width:500px;
    zoom:1;
}
#videogallery span{
    display:block;
}
#videogallery a{
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
    position:relative;
    vertical-align:top;
    margin:3px;
    width:160px;
    font:12px/18px "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
    font-weight:normal;
    color:#333333;
    text-decoration:none;
    text-align:center;
    opacity:0.87;
}
#videogallery a img{
    display:block;
    border:none;
    margin:0;
}
#videogallery a:hover{
    opacity:1;
}

Answer 1

我注意到了一些事情。首先，ids在html中必须是唯一的，但它们不在您的文档中。您在循环中创建<div id="videogallery">，以便ID多次出现。您应该将id更改为class（或完全删除div）。

同样#videogallery的宽度设置为500像素，这也是包含表格的宽度。如果您计划将5张图像彼此相邻，则div（或图像）的宽度不应超过100像素。减小宽度应该可以帮助您缩小图像之间的差距。

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

Answer 2

90％的代码完全是多余的。

你不需要这些表（实际上，这些天使用它们进行布局被认为是非常糟糕的做法），并且你不需要图像周围的包装<div>元素。

您的<a>标记已经使用display:inline-block;进行了样式设置，因此实际上它们应该已经水平排列而没有任何内容。只是将它们放在一起，没有额外的垃圾，他们会很乐意为你排队。您可以使用margin和padding在它们之间添加任何额外的间距。

除了整个批次之外，您需要的只是一个包装器<div>来为整个块强制执行固定的width，以便它们在正确的点处换行。{/ p >

希望有所帮助。

Answer 3

似乎之间存在巨大的空间每个差距。

你的意思是7像素的差距吗？

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

Answer 4

您可以使用div和css <table>完全避免float看到此http://css.maxdesign.com.au/floatutorial/tutorial0407.htm

请参阅http://jsfiddle.net/ZfyRb/

css水平显示图像

4 个答案: