0

CSS の table、table-row、table-cell div を使用したシンプルなコンテンツ レイアウト:

<div style="display:table-cell; border:1px solid blue">
    some content  <!-- this line wrappend in <p> tag in next example -->
    <p>some content</p>
    ...
</div>

右側にネストされたテーブルがある 2 列のレイアウト

上記の例ですが、左側のセルのコンテンツが段落 (最初の行) に配置されています。

上記の例ですが、 <p> 右のテーブルセルのフローを壊しています

ご覧のとおり<p>、左のセルにタグを入れた後、右のセルが下にシフトされます。<p>私が使用するか<h1>タグ付けするかは問題ではありません。行の高さが変更され、隣接するセルの最初の行がそれに合わせて配置されているとします。

誰でもこの動作を説明できますか。隣接するセルのシフトを防ぐにはどうすればよいですか?

4

2 に答える 2

3

「テーブルセル」のブラウザのデフォルト動作を継承、継承、中央に垂直方向に配置することで採用しています。（不思議なことにあなたのページの一番下）。

vertical-align:topCSS に ' ' を追加するだけで、確実に状況が解決されます。ここで分岐した jsFiddle

たとえば、Firefox [ユーザー エージェント html.css] :

tr {
  display: table-row;
  vertical-align: inherit;
}
tbody {
  display: table-row-group;
  vertical-align: middle;
}
thead {
  display: table-header-group;
  vertical-align: middle;
}
tfoot {
  display: table-footer-group;
  vertical-align: middle;
}
/* for XHTML tables without tbody */
table > tr {
  vertical-align: middle;
}
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
于 2013-09-17T20:44:09.553 に答える
0

ブラウザが<p>タグに自動的に追加するマージンと関係があるようです...

div[style*="table-cell"] p:first-child {
  margin: 0;
}
于 2013-09-17T20:37:04.933 に答える