Форум XHTML.ru <!-- по-русски -->

Сайты - по стандартам, но не стандартные сайты!


#1 29.04.2015 06:28

rkm432
Новичок
Зарегистрирован: 23.05.2010
Сообщений: 6

img в table-cell

Неожиданно встретился с новой для себя проблемой в вёрстке: если создать дивную таблицу и в левую ячейку поместить img, в правую текст, то текст в правой будет опущен до самого низа. При этом если перед img добавить &nbsp;, то текст справа встаёт "на своё место", то есть вверх, но в левой ячейке появляется лишний пробел. Как сделать, чтобы не нужно было добавлять &nbsp;? Вообще странно что нельзя в ячейку просто добавить картинку, это маразм какой-то. Кстати такая же ситуация возникает если в левую ячейку добавить пустой <div style="height:50px; width:50px;"> и проблема решается добавлением в содержимое дива: &nbsp; Ну с дивом ещё понятно, всегда так делал, но img почему?

Код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
    </head>
    <body>
        <div style="border: 1px solid red;">
            <div style="display:table; width:100%;"><div style="display:table-row">
                <div style="display: table-cell;">
                    <img src="https://yastatic.net/morda-logo/i/logo.svg">
                </div>
                <div style="display: table-cell; width: 100%;">
                    123
                </div>
            </div></div>
        </div>
    </body>
</html>

Отредактированно rkm432 (29.04.2015 06:37)

Нет на форуме

 

#2 29.04.2015 06:58

rkm432
Новичок
Зарегистрирован: 23.05.2010
Сообщений: 6

Re: img в table-cell

Нашёл такой вариант решения: в левую ячейку перед img добавить &nbsp; и в стиль левой ячейки добавить: line-height: 0; vertical-align: top;
Есть ещё вариант?

Нет на форуме

 

#3 29.04.2015 07:40

rkm432
Новичок
Зарегистрирован: 23.05.2010
Сообщений: 6

Re: img в table-cell

Код:

Вариант 2 (недостаток: для картинки надо определять размер и нет alt):<br>
        <div style="border: 1px solid red;">
            <div style="display:table; width:100%;"><div style="display:table-row">
                <div style="display: table-cell;">
                    <div style="background-image: url(https://yastatic.net/morda-logo/i/logo.svg); height: 120px; width: 178px;" title="test2">&nbsp;</div>
                </div>
                <div style="display: table-cell; width: 100%;">
                    123
                </div>
            </div></div>
        </div>
        <br>
        Вариант 3 (недостаток: для картинки надо определять размер, картинка должна не иметь прозрачных участков):<br>
        <div style="border: 1px solid red;">
            <div style="display:table; width:100%;"><div style="display:table-row">
                <div style="display: table-cell;">
                    <div style="position:absolute; text-align:center; line-height:120px; width:178px;
    vertical-align:middle;">test1</div>
                    <div style="background-image: url(https://yastatic.net/morda-logo/i/logo.svg); height: 120px; width: 178px; position:relative;" title="test2">&nbsp;</div>
                </div>
                <div style="display: table-cell; width: 100%; vertical-align: top;">
                    123
                </div>
            </div></div>
        </div>

Нет на форуме

 

#4 29.04.2015 07:44

rkm432
Новичок
Зарегистрирован: 23.05.2010
Сообщений: 6

Re: img в table-cell

Пока лучшим считаю первый вариант.

Нет на форуме

 

#5 30.04.2015 21:47

rkm432
Новичок
Зарегистрирован: 23.05.2010
Сообщений: 6

Re: img в table-cell

Решение:

Код:

<div style="border: 1px solid red;">
    <div style="display:table; width:100%;"><div style="display:table-row">
        <div style="display: table-cell;">
            <img src="https://yastatic.net/morda-logo/i/logo.svg" alt="test1" title="test2" style="display:block;">
        </div>
        <div style="display: table-cell; width: 100%; vertical-align:top;">
            123
        </div>
    </div></div>
</div>

Нет на форуме

 

Board footer

Работает на PunBB
© 2002—2005 Rickard Andersson