0

ウェブサイトに動画のリストをできるだけ多く表示したくありません。左側にナビゲーション領域が必要です。ナビゲーションの横に最初のビデオを配置したいと思います。

残念ながら、ビデオはナビゲーションの下に配置されます。私はすでに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;
}
4

2 に答える 2

1

float: leftfrom#video_areaとを削除し、代わりに to.video_containerを追加float: leftし#navigation_areaます。display: inlineに変更display: inline-block

#navigation_area{
    ...
    float: left;
}

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

完全なJSFiddle

video_areaを の右側に置きたい場合は、どうしても にaをnavigation_area設定できます。min-widthcontent_area 

#content_wrapper {
    min-width: 400px;
}

変更されたJSFiddleを参照してください

于 2013-01-29T00:01:11.930 に答える
1

同様に、navigation_area を左に浮かせてみてください。

スタイル ID の前の # を忘れないでください

于 2013-01-28T23:18:52.180 に答える