4

何か奇妙なことが起こっています...私はdisplay: inline-block要素をインラインで表示するために使用しています。addがいくつかの新しい要素を追加するまで、すべて問題ありませんでした。次に例を示します。

神様 悪い

CSS：

section#main{
    width: 960px;
    margin: 7% auto 0;
    background: #000;
    opacity: 0.86;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 5px;
}

div#video{
    border: 1px solid red;
    width: 640px;
    height: 360px;
    margin: 10px;
    display: inline-block; 
}

nav{
    margin: 10px;
    border: 1px solid yellow;
    display: inline-block;
    height: 360px;
    width: 270px;
}

HTML：

<section id="main">
        <div id="video"></div>
        <nav>
            <ul>
            <li>Keliaujame ?... JAV: ?ikaga / Chicago S01E03</li>           
            </ul>
        </nav>
        <div id="comments"></div>
    </section>

http://jsfiddle.net/nonamez/PfeP5/2/

何が間違っている可能性がありますか？

4

3 に答える 3

4

これは垂直方向の配置の問題です。両方の要素の垂直方向の配置を上に設定するだけです。

div#video{
    vertical-align:top;
}

nav{
    vertical-align:top;
}

http://jsfiddle.net/xHNJm/

于 2013-03-12T21:29:10.517 に答える
1

display: inline-block;両方から削除

float: left;両方に追加

以下を追加し<div style="clear: both"></div>ます<div id="comments">

このフィドルで示されているように：http：//jsfiddle.net/9BsS3/

于 2013-03-12T21:30:24.340 に答える
0

個人的には、クロスブラウザーの動作が不安定なため、インラインブロックの使用は常に避けようとしています。

次のCSSを使用します（display：inline-blockを削除し、その場所でfloat：leftを使用します（子のfloat要素を確実にクリアするために親要素もfloatされるようにします）：

section#main{
    width: 960px;
    margin: 7% auto 0;
    float:left;
    background: #000;
    opacity: 0.86;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 5px;
}

div#video{
    border: 1px solid red;
    width: 640px;
    height: 360px;
    margin: 10px;
    float:left;
}

nav{
    margin: 10px;
    border: 1px solid yellow;
    float:left;
    height: 360px;
    width: 270px;
}
nav ul {
    margin:0;
    padding:0;
    list-style:none;
}
nav li {
    color:#fff;
}
于 2013-03-12T21:33:42.463 に答える