Странное поведение {display: table} - PullRequest
Новая
       12

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

0 голосов
/ 02 апреля 2011

Я не могу понять это. При использовании 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>

Ответы [ 3 ]

2 голосов
/ 02 апреля 2011

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

Пример работы: при jsFiddle

0 голосов
/ 02 апреля 2011

набор style="verticle-align:top" для ваших "ячеек" divs

0 голосов
/ 02 апреля 2011

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

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

...