1

次のようなテーブルとして表示されるネストされた div のセットがあります。

<div class="table">
    <div class="table-row">
        <div class="table-cell"><div class="just-a-box"><!--&nbsp;--></div></div>
        <div class="table-cell">Just some text</div>
    </div>
</div>

テーブル表示は CSS を使用して実現されます。最初のセルの "just-a-box" div は、次のようにスタイル設定されます。

.just-a-box {
    background-color: blue;
    height: 50px;
    width: 50px;
}

私の問題は、HTML コメントで示されているようにボックス内に " " を追加しない限り、このボックスが 2 列目のテキストの配置に影響することです。テキストはセルの上部に配置されなくなりました。

なぜこれが起こっているのかわかりません。最初のセルの内容に関して何も仮定したくないので、2 番目のセルの内容を最初のセルから完全に独立させるための解決策を探しています。これは可能ですか？

ヒントをいただければ幸いです。とにかく、細胞が互いに独立していない理由を誰かが説明できるとしたら、それは素晴らしいことです. それは私が期待していたものです。

問題の図については、http://jsfiddle.net/fMWQH/1/を参照してください。

4

3 に答える 3

1

vertical-align: top;を追加してみてください。あなたの.table-cellクラスに

CSS

<style type='text/css'>
.table {
display: table;
}

.table-row {
display: table-row;
}

.table-cell {
display: table-cell;
vertical-align: top;
}

.just-a-box {
background-color: blue;
height: 50px;
width: 50px;
}
</style>

HTML

<div class="table">
<div class="table-row">
<div class="table-cell"><div class="just-a-box"></div></div>
<div class="table-cell">Just some text</div>
</div>
</div>

<hr/>

<div class="table">
<div class="table-row">
<div class="table-cell"><div class="just-a-box"></div></div>
<div class="table-cell">Just some text</div>
</div>

jsfiddle の例

于 2013-08-11T15:24:26.780 に答える