图像循环和视频循环不能正确排列

Question

我有td容器，我使用php来循环播放一组视频和一组图像。每个图像和视频都在同一类的div中，但由于某种原因，视频最终会高于图像。知道是什么原因引起的吗？

两个PHP循环，为每个图像/视频输出一个html div：

<td colspan="5" style="max-width: 1000px; overflow-x: auto;">
<?php
$fk = $db_table_row["images_fk"];
$image_row = find_images_by_id($fk);//get images from an sql table
for ($i = 1; $i < count($image_row)+1; $i++) {
    if($image_row[$i] != null){
        echo "<div id='media_wrap'><img src='{$image_row[$i]}' height='200'/>&nbsp</div>";
    }
}

$fk = $db_table_row["videos_fk"];
$video_row = find_videos_by_id($fk);//get videos from an sql table
for ($i = 1; $i < count($video_row)+1; $i++) {
    if($video_row[$i] != null){
        echo "<div id='media_wrap'><video width=\"270\" height=\"200\" controls><source src=\"{$video_row[$i]}\"></video>&nbsp</div>";

    }
}
?>
</td>

wrap div css：

 #media_wrap{display: inline; white-space: nowrap; max-height: 200px;}

如果我制作2个视频或2个图像循环，它们排列完美。如果我在图像循环之前放置视频循环，那么图像最终会更高。

它们都被设置为200高度，并且在相同的id =＆＃34; media_wrap＆＃34; div，所以他们应该表现一样吗？

修改 它是由标题中的引导程序引起的：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

我可以把它拿出来，但我可能真的需要它以后的下拉菜单:(

Answer 1

一个简单的修复：）

您需要在父级#media_wrap上设置max-height，此时需要将其应用于子级。您应该在#media_wrap img, #media_wrap video或#media_wrap *中定义它。然后你只需要将两个div彼此相邻浮动:)注意，display: inline或white-space: nowrap都不是必需的。

另请注意，您还要定义两个具有相同ID的div，这是非常糟糕的做法。相反，我建议为你的两个div提供media_wrap类，而不是将其用作ID。

最后，请注意，对于与CSS相关的问题，有助于包含实际HTML输出的副本，而不是用于执行输出的代码：）

我创造了一个小提琴，图像和视频都被强制缩小，彼此相邻。我还用同名的类替换了你的ID，并添加了一点偏移量。可以找到小提琴here。

希望这有帮助！

修改

根据您的新评论，图片和代码，我对您要实现的目标有了更好的了解。因此，我稍微修改了代码。

请注意，与水平滚动条组合使用时，不能将两个div显示在一起。因此，我将图像和视频合并为一个div。

此外，现在需要white-space: nowrap ;）

新代码：https://jsfiddle.net/85kd0wma/

现在，图像和视频的高度固定，并且会使用水平滚动条彼此相邻显示。希望这就是你所追求的：）

Answer 2

所以在jsfiddle上它使用了bootstrap链接，但是当我将完全相同的代码复制到我的项目时它没有用。我确保我正在测试一个100％独立的文件，我可以在jsfiddle中100％复制。甚至试图把它放在我的其他一些项目中，以确保它不会被jsfiddle中的任何东西所影响。

最后我强迫它使用top：0;

<?php $left = 0; ?>
        <img style="position: absolute; top: 0; left: <?php echo $left; $left+=205; ?>px;" src='http://placehold.it/200x200' height='200'/>
        <img style="position: absolute; top: 0; left: <?php echo $left; $left+=205; ?>px;" src='http://placehold.it/200x200' height='200'/>
        <img style="position: absolute; top: 0; left: <?php echo $left; $left+=205; ?>px;" src='http://placehold.it/200x200' height='200'/>
        <video width='270' height='200' style="position: absolute; top: 0; left: <?php echo $left; $left+=275; ?>px;" controls><source src='http://techslides.com/demos/sample-videos/small.mp4'></video>
        <video width='270' height='200' style="position: absolute; top: 0; left: <?php echo $left; $left+=275; ?>px;" controls><source src='http://techslides.com/demos/sample-videos/small.mp4'></video>
        <video width='270' height='200' style="position: absolute; top: 0; left: <?php echo $left; $left+=275; ?>px;" controls><source src='http://techslides.com/demos/sample-videos/small.mp4'></video>

感谢帮助Obsidian Age：D