Простой макет содержимого с использованием таблицы CSS, таблицы-строки и табличных ячеек:
<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>
расположение двух столбцов с вложенной таблицей справа
Вышеприведенный пример, но с содержимым левой ячейки, помещенным в параграф (первая строка):
выше, но <p> разрыв потока правой таблицы-ячейки
Как вы можете видеть, после того, как тэг <p>
помещается в левую ячейку, правая ячейка сдвигается вниз. Не имеет значения, использую ли я <p>
или <h1>
. Предположим, что он меняет высоту линии, а 1-я строка в соседней ячейке выровнена с ней.
Может ли кто-нибудь объяснить это поведение. Как я могу предотвратить смещение смежной ячейки?
Он принимает поведение браузера по умолчанию "table-cell", вертикально выравнивая его, чтобы наследовать, наследовать, посередине. (Странно внизу на вашей странице).
Просто добавьте " vertical-align:top
" в ваш CSS, чтобы убедиться в том, что исправлена ваша ситуация. jsFiddle раздвоен здесь
Например, Firefox [user agent 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;
}
Это похоже на то, что браузер добавляет к тегу <p>
автоматически.
div[style*="table-cell"] p:first-child {
margin: 0;
}