html - CSS - 不需要的中断

Question

我不想在我的网站上显示尽可能多的视频列表。在左侧，我想要一个导航区域。在导航旁边，我想放置第一个视频。

不幸的是，视频将放置在导航下方。我已经尝试过 display: inline-block; 等等，但还没有解决方案。

我做错什么了？

<div id="content_wrapper">
    <div id="navigation_area"></div><!-- div end video area -->

    <div id="video_area">
        <div class="video_container">
            <div class="video_thumb"></div>
            <div class="video_info_container">
                <div class="video_name">Video Name 1</div>
                <div class="rating_container">
                    <div class="rating"></div>
                </div>
            </div>
        </div><!-- video_container -->

        <div class ="video_container">
            <div class="video_thumb"></div>
            <div class="video_info_container">
                <div class="video_name">Video Name 2</div>
                <div class="rating_container">
                    <div class="rating"></div>
                </div>
            </div>
        </div><!-- video_container -->

    </div> <!--div end video area-->
</div><!--div end content_wrapper-->

CSS：

navigation_area{
    height:500px;
    width:100px;
    background-color:#ffffff;
    border-radius: 15px;
    -moz-border-radius: 15px;
    margin:2px;
}

#video_area{
    float: left;
}

.video_container{
    width: 400px;
    height: 300px;
    background-color: #ffffff;
    margin-left: 20px;
    margin-top: 20px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    float: left;
    display: inline;
}

Answer 1

尝试将您的 navigation_area 也向左浮动。

不要忘记样式ID前的#

Answer 2

删除float: leftfrom #video_areaand.video_container并添加float: leftto#navigation_area代替。更改display: inline为display: inline-block

#navigation_area{
    ...
    float: left;
}

.video_container{
    ...
    display: inline-block;
}

完整的 JSFiddle

如果您想保留 的video_area右侧navigation_area，无论如何，您都可min-width以为content_area

#content_wrapper {
    min-width: 400px;
}

查看修改后的 JSFiddle