HTML5: изображение в левом элементе «display: table-cell» помещает содержимое в правый элемент

Question

Учитывая эту маленькую скрипку: http://jsfiddle.net/5Sw3h/8/

У меня есть панель навигации слева, панель контента в центре, и там также есть немного места справа.Они размещаются с использованием семантики «display: table, display: table-cell».

В настоящее время я испытываю то, что, помещая контент в левую панель, он, кажется, отталкивает контент на панели контента некоторыми, в основном дляизображение там.Однако, в общем, кажется, что содержимое немного опускается.

Я пробовал установить в качестве отступа 0 на довольно многих элементах (как я сначала подумал, что это так), затем я попробовал вертикальное выравнивание наполе содержимого, некоторое относительное расположение, определяющее «верх».Но ничто на самом деле не помогло ...

Я знаю, что, должно быть, упустил из виду какую-то очевидную вещь, просто не могу ее найти.

Может кто-нибудь помочь мне найти то, что мне не хватает?

Answer 1

Где у вас есть display: table-cell, добавьте vertical-align: top.

Начальное значение vertical-align равно baseline, что вызывает смещение.

Answer 2

тридцатка уже дала отличный ответ. Однако в Safari и Opera вы столкнетесь с новой проблемой, поэтому лучше убедиться, что вы установили ширину для всех элементов ячейки таблицы. Другой проблемой является поддержка отображения таблицы / ячейки таблицы в IE 6/7, где вы можете использовать скрипт HTC, написанный Таналином здесь http://tanalin.com/en/projects/display-table-htc/.