0

だから私はこのかなり奇妙な問題を抱えています。私はいくつかを並べようとしていますdivsが、この奇妙な問題に遭遇しました。たとえば、div の中に入れ<input type="checkbox" />て、他の div と同じ行に並べようとすると、何を試しても機能しませんが、2 番目の div にテキストを追加すると、突然機能し始めます。ハプニング？

物事を少し明確にするための私のコードの例を次に示します: http://jsfiddle.net/wxgVw/2/

<div id="container">
    <div id="container2">
        <div id="left">
            <input type="checkbox" />
        </div>
        <div id="right">

        </div>
    </div>
</div>

body{
    margin:50px;
}

#container{
    width:770px;
    height:400px;
    border:1px solid red;
}

#container2{
    width:700px;
    height:50px;
    margin:10px;
    outline:1px solid red;
    padding:10px;
}

#left{
    width:30px;
    height:30px;
    outline:1px solid green;
    display:inline-block;
    zoom:1;
    *display:inline;
}

#right{
    width:400px;
    height:30px;
    outline:1px solid black;
    display:inline-block;
    zoom:1;
    *display:inline;
}
4

2 に答える 2

2

floatプロパティを使用することもできます。両方のdivを左側にフロートさせ、オーバーフローを確認します。フローティングの問題を防ぐために、hiddenは上のコンテナーに設定されます。

サンプルを編集しました：http： //jsfiddle.net/wxgVw/4/

#container2{
    width:700px;
    height:50px;
    margin:10px;
    outline:1px solid red;
    padding:10px;
    overflow:hidden;
}

#left{
    width:30px;
    height:30px;
    outline:1px solid green;
    float:left;
}

#right{
    width:400px;
    height:30px;
    outline:1px solid black;
    float:left;
}
于 2012-06-20T18:37:48.767 に答える
2

使用するときdisplay: inline-blockはいつでも、指定することをお勧めしますvertical-align: top(または、必要bottomに応じて)。それはこの問題を防ぐでしょう。

于 2012-06-20T18:34:41.303 に答える