Странное поведение {display:table}

Я не могу понять это. При использовании display:table вместе с display:table-cell размещение тега img в ячейке1 или ячейке2 заставит содержимое (например, содержимое «Это тест») в другой ячейке опуститься ниже изображения. Это правильно? Это происходит во всех браузерах, поэтому я думаю, что это правильно, но почему?

<html>
<head>
    <title></title>
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        div {
            border: 2px solid #000;
            width: 100%;
            height: 100%;
        }
        .table {
            display: table;
            border-collapse: collapse;
        }
        .row {
            display: table-row;
        }
        .cell {
            display: table-cell;
            width: 50%;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="row">
            <div id="cell1" class="cell">
                <h1>This is a test</h1>
            </div>
            <div id="cell2" class="cell">
                <img src="" />
            </div>
        </div>
    </div>
</body>
</html>

html css css-tables
person bern    schedule 01.04.2011    source источник
comment
Почему бы вам сделать это именно так, а не просто использовать таблицы?   -  person Dave    schedule 02.04.2011
comment
@bern, не могли бы вы опубликовать несколько скриншотов или что-то еще, что даст больше информации   -  person ant    schedule 02.04.2011
comment
предоставление вашему .cell классу vertical-align: top;, похоже, исправляет это.   -  person drudge    schedule 02.04.2011
comment
@Dave: Вот как вы могли бы использовать табличный макет без использования семантически неправильных таблиц.   -  person drudge    schedule 02.04.2011
comment
@jnpcl - разве они не семантически неверны, потому что определяют внешний вид в HTML, а не только данные? Если это так, то делать это таким образом тоже неправильно по той же причине imo.   -  person Dave    schedule 02.04.2011
comment
@Dave Div определяет области на веб-странице. css оформляет div в виде двух столбцов. Нет никакой разницы между обертыванием контента и его плаванием или обертыванием и разделением на контролируемые области.   -  person bern    schedule 02.04.2011
comment
@bern @jnpcl - вы правы - это кажется безумием, но только потому, что я никогда раньше не видел, чтобы это делалось таким образом - но - очень круто - я могу сделать это в будущем :)   -  person Dave    schedule 02.04.2011

Ответы (3)


arrow_upward
2
arrow_downward

Хм. vertical-align: top в ячейке таблицы.

Рабочий пример: в jsFiddle

person Répás    schedule 01.04.2011

arrow_upward
0
arrow_downward

Это связано с тем, что вставка изображения в div выводит ваш макет из естественного потока макета.

Я бы предложил просто использовать таблицы или, если это не так, использовать float и создать его таким образом.

person PHP    schedule 01.04.2011

arrow_upward
0
arrow_downward

установите style="verticle-align:top" для ваших "сотовых" div

person Orin    schedule 01.04.2011