Понимание дисплея: table-cell; функционирование

Обратите внимание, что я не пытаюсь решить какую-либо конкретную проблему, , но пытаюсь понять, что вызывает эту проблему.

Я установил width, height и display некоторых div, но настройки высоты и ширины не выполняются. Текст также сдвигается вниз.

http://jsfiddle.net/k7esv/

1) Почему он нажимает текст вниз, когда height задается в таблице-строке, а затем, когда height удаляется, он помещает текст вверху?

2) Почему настройки ширины и высоты не соблюдаются?

3) Почему настройка свойства margin не влияет на них?

http://jsfiddle.net/k7esv/1/

ОТВЕТЫ

Ответ 1

1) Это, похоже, проблема с обработкой, специфичная для Firefox. Установка свойства vertical-align в divs исправляет его. top, middle или bottom все, похоже, работают. Я не понимаю, что делает FF, когда есть набор height, но не vertical-align; это может быть ошибка.

2) Ширина и высота соблюдаются, но они подчиняются правилам калибровки таблиц. Когда в таблице недостаточно места, чтобы дать каждой из ячеек ширину, которую они указали, это даст больше места для ячеек, у которых больше контента. Это то, что происходило с вашим примером. Если вы посмотрите на мой пример ниже, вы увидите, что когда родительский элемент шире, чем общая сумма ширины ячеек таблицы, ячейки учитывают ширину. Высота должна всегда работать (за исключением случая, когда проблема FF-рендеринга была упомянута выше).

3) Ячейки таблицы не имеют полей. Используйте border-spacing и display: table в родительском div.

http://jsfiddle.net/chad/k7esv/3/

Ответ 2

Я просто добавлю (видя, что, как кажется, пропустили), что установка высот в отдельных ячейках таблицы в строке таблицы может быть бессмысленной, поскольку все ячейки в одной и той же таблице строк будут иметь ту же высоту, что и самая высокая ячейка в указанной строке.

Сказав, что высота может быть добавлена, когда динамический контент подается в разные ячейки, что означает, что их высоты колеблются. Возможно, вы хотите, чтобы определенная ячейка никогда не была меньше высоты X, которая будет действовать только тогда, когда другая определенная ячейка имеет меньше содержимого.