Question

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

不幸的是，视频会放在导航栏下方。我已经尝试过显示：inline-block;等等，但还没有解决方案。

我做错了什么？ enter image description here

<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: left和#video_area移除.video_container，然后将float: left添加到#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

CSS - 不需要的休息时间

2 个答案: