Создание таблицы с использованием структуры div

Question

Я пытаюсь выполнить такую ​​раскладку ..

Обратите внимание, что текст всегда центрирован по вертикали. Я хочу добиться этого, используя вертикальное выравнивание с divs.

Примечание: блоки не имеют определенной высоты. Использование таких свойств, как top:50% или позиционирование не приведет к точному центрированию.

http://jsfiddle.net/V8S8b/

Answer 1

Попробуйте следующее, я отредактировал ссылку jsfiddle, которую вы дали выше, и сумел получить макет, подобный изображенному выше.

h1 {
    display: inline-block;
    font-size:18px;
    font-weight:bold;
    color: #fff;
    margin-top: 20px;
    margin-bottom: 10px;
}

ul.entries {
    width:500px;
}

ul.entries li {
    margin: 10px;
    border-bottom:1px solid #000;
}

.inner {
    overflow: hidden;
    padding: 10px;
}

ul.entries li img {
    float:left;
    margin-right:15px;
    display: inline;
}

Answer 2

Проблема в изображении.Обходной путь заключается в том, чтобы разделить изображение и текстовое содержимое на две отдельные «ячейки», которые будут правильно определять выравнивание.Вот пример - мне пришлось установить некоторую ширину для контейнеров, но, поскольку они действуют как ячейки таблицы, они будут корректироваться в соответствии с содержимым (как я пытался демонтировать)

Answer 3

.ul.entries li {
    display:table-row;
    padding:8px;
    border-bottom:1px solid #000;
}

У вас есть ошибка здесь. ul не должен предшествовать точка, так как он не является классом. REST выглядит нормально.