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

从 #video_area 和 .video_container 中删除 float: left 并将 float: left 添加到 #navigation_area 代替。将 display: inline 更改为 display: inline-block

#navigation_area{
    ...
    float: left;
}

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

完成JSFiddle

如果你想让video_area保持在navigation_area的右边，无论如何，你可以为内容区域

#content_wrapper {
    min-width: 400px;
}

参见修改后的 JSFiddle