0

私は次のhtmlを持っています

<div id="parent">
    <div id="one">one</div>
    <div id="two">two</idv>
</div>

<div id="other">some</div>

そして、これはcssです

#one, #two{
    display: table-cell; 
    vertical-align: middle; 
    height: 47px; 
    background: red;
}

#parent
{
    display:table;
    border-collapse: separate; 
    border-spacing: 10px 0;
}
#other{
    background: blue;
    height: 200px;
}

質問で説明されているように、明確な両方が機能していませんが、前の div のようにテーブルセルのように動作しています。これに対する解決策は、削除することdisplay: table;です。しかし、 divを削除display: table;せずにアイデアがあることを知りたいです。display: table-cell;#one,#two

デモ

4

1 に答える 1

4

それはタイプミスです.jsフィドルの赤い構文を見たはずです

<div id="parent">
    <div id="one">one</div>
    <div id="two">two</div>
</div>

デモ

これはここです

<div id="two">two</idv>

する必要があります

<div id="two">two</div>

注:clear: both;デモで使用したことはありません。要素をフローティングしてdisplay: table;いないため、レンダリングする要素の表示を変更するだけなので、それを必要とtable-cell しません。クリアする必要があります。プロパティを使用する必要があるのは、clear浮動要素がある場合のみです。

詳細についてはclear: both;

于 2013-07-24T10:32:39.900 に答える