Что нарушает эту раскладку стола?

Question

Что нарушает эту раскладку стола?

0

Простой макет содержимого с использованием таблицы 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-я строка в соседней ячейке выровнена с ней.

Может ли кто-нибудь объяснить это поведение. Как я могу предотвратить смещение смежной ячейки?

David Unric 17 сен. 2013, в 22:28

Источник

Теги:

html

css

2 ответа

0

Это похоже на то, что браузер добавляет к тегу <p> автоматически.

div[style*="table-cell"] p:first-child {
  margin: 0;
}

upful 17 сен. 2013, в 18:32

0

Пробовал, но Firefox игнорирует это.
David Unric 17 сен. 2013, в 21:08
0

@Milche Patern ваше исправление хорошо, ваше объяснение неверно. Выравнивание базовой линии связано с выравниванием текста ... не всегда так же, как и снизу. Также ... нижняя или базовая линия не является выравниванием по умолчанию для ячеек таблицы, это середина. Кроме того, вы бы увидели, если бы вы нарисовали рамку вокруг ячейки таблицы, содержащей таблицу, которая соответствует другой ячейке ... ну, я не могу прокомментировать ваше сообщение.
upful 17 сен. 2013, в 21:14
0

@DavidUnric webkit предназначен для Safari / Chrome, поэтому этот конкретный ответ не будет работать во всех браузерах. Вместо этого просто установите любой элемент, который у вас есть первым в ячейке, чтобы его поле было равно 0, если вы хотите, чтобы он выровнялся. Я исправил свой ответ для работы в других браузерах.
upful 17 сен. 2013, в 21:25
0

@upful Правильно, это не дно, оно наследуется (проверка Firefox и gChrome).
Milche Patern 18 сен. 2013, в 12:47

Показать ещё 2 комментария

Ещё вопросы

@Milche Patern ваше исправление хорошо, ваше объяснение неверно. Выравнивание базовой линии связано с выравниванием текста ... не всегда так же, как и снизу. Также ... нижняя или базовая линия не является выравниванием по умолчанию для ячеек таблицы, это середина. Кроме того, вы бы увидели, если бы вы нарисовали рамку вокруг ячейки таблицы, содержащей таблицу, которая соответствует другой ячейке ... ну, я не могу прокомментировать ваше сообщение.
@DavidUnric webkit предназначен для Safari / Chrome, поэтому этот конкретный ответ не будет работать во всех браузерах. Вместо этого просто установите любой элемент, который у вас есть первым в ячейке, чтобы его поле было равно 0, если вы хотите, чтобы он выровнялся. Я исправил свой ответ для работы в других браузерах.
@upful Правильно, это не дно, оно наследуется (проверка Firefox и gChrome).

Milche Patern · Accepted Answer · 2013-09-17T19-25-00.000Z

Он принимает поведение браузера по умолчанию "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;
}

Спасибо за показ рабочего примера. Документировано ли где-нибудь задокументировано принятие браузером поведения по умолчанию «ячейки таблицы» ?
Хамм? Какая-то диаграмма поведения браузера по умолчанию, это было бы неплохо, но это зависит от поставщика. Браузер может изменить это с версии на другую, и т. Д., И т. Д. Если это существует, я хочу знать.