4

div内の次のテーブル要素により、"center"div内のコンテンツが"left"上から数ピクセル（ブラウザでは8ピクセル）オフセットされます。表の前にテキストを追加すると、このオフセットが削除されます。

なんで？テーブルの前に「ダミー」のテキスト行を必要とせずに、これが発生しないようにするにはどうすればよいですか。

<html>
<head>
    <style type="text/css">
        #left {
            display: table-cell;
            background-color: blue;
        }
        #menu {
            background-color: green;
        }
        #center {
            background-color: red;
            display: table-cell;
        }
    </style>
<body>
    <div id="left">
        <div id="menu">
            Menu 1<br>
            Menu 2<br>
        </div>
    </div>
    <div id="center">
        <table><tr><td>This is the main contents.</tr></td></table>
    </div>
    <div id="left">
        <div id="menu">
            Menu 1<br>
            Menu 2<br>
        </div>
    </div>
</body>
</html>

Update0

フロートを使用すると、中央の列をそのコンテンツに拡張することができないことに注意してください。この例を抽出したソースはdisplay: table; margin-left: auto; margin-right: auto;、すべてを体の中心に置くために使用します。

4

2 に答える 2

4

vertical-align:top;'#left'スタイルに追加することで修正できました。

display: table-celldivを別のdivでラップする必要がありますdisplay:table-row

于 2010-03-08T14:41:46.960 に答える
0

推測では、あなたはあなたのmargin-topセットを持っていると思います<table>。Firebugをご覧ください。

table {
margin-top: 0;
}

このようにレイアウトしている特別な理由はありますか？を設定せずに、divをフロートさせ、高度なレイアウトを実行できますdisplay: table-cell。また、テーブルは表形式のデータにのみ使用する必要があります。

于 2010-03-08T14:15:16.693 に答える