Question

我在jwplayer中加载了一个视频，并在其旁边放置了一个缩略图的小视频队列。出于某种原因，当我的播放器加载时，它将整个队列推到播放器下方，尽管它紧挨着它。它表现得好像容器太小，但如果我使videoWrapper变大，我会得到相同的行为。

HTML：

<div id="videoWrapper">
    <div id="video"></div>  

    <script type='text/javascript'>
            jwplayer('video').setup({
                    file: <?php echo '\''.$sex.'\''?>,
                    width: '750',
                    height: '420',
                    primary: 'flash',
                    autostart: 'false'
            });
    </script>

    <div id="queueList">
        Up Next
        <input type="image" src=<?php echo $thumbs[0]; ?> class="thumb" />
        <input type="image" src=<?php echo $thumbs[1]; ?> class="thumb" />
        <input type="image" src=<?php echo $thumbs[2]; ?> class="thumb" />
        <input type="image" src=<?php echo $thumbs[3]; ?> class="thumb" />
    </div>
</div>

CSS：

#videoWrapper{
    display:block;
    width:872px;
    height:420px;
    margin-top:40px;
    margin-left:auto;
    margin-right:auto;
}#queueList{
    width:120px;
    height:420px;
    float:right;
}.thumb{
    margin-top:7px;
    width:120px;
    height:auto;
    background:black;
}#video{
    width:750px;
    height:420px;
    background:black;
    color:purple;
    float:left;
}

如果有人可以提供任何理由，为什么会发生这种情况或者解决这个问题，我会非常感激。

现在可以看到我在谈论的内容：http://porndoraone.com/test2.php 橙色框应位于黑色边框内，与视频相邻。

Answer 1

解决方案似乎很简单。你需要做的就是由jwplayer创建的样式#video_wrapper，如下所示：

#video_wrapper {
    float: left;
}

通过工作演示了解JSFiddle。

JWplayer加载后元素的位置会发生变化

1 个答案: