Запретить div, содержащее изображение, изменять размер при добавлении текста

Question

Запретить div, содержащее изображение, изменять размер при добавлении текста

У меня есть div, центрированный на сайте и содержащий картинку. div расширяет свой height, чтобы соответствовать картине, как и ожидалось. Затем я добавляю текст и ожидаю, что он будет выложен в нижней части div. Но в дополнение к этому div также немного изменяется, так что его height является higher, чем height изображения. Вот пример:

Html:

<div class="siteContent">

    <img class="debug" src="../../Content/themes/base/images/pageTitle.png" /> 

    <span>

        aaa

    </span>

</div>

CSS:

body

{

    margin: 0;

}

.siteContent

{   

    width: 960px;

    margin-left: auto;

    margin-right: auto;

    border: thin solid;

}

.debug

{

    border: thin solid;

}

Результат:
Введите описание изображения здесь

Нежелательный эффект отмечен красным цветом.

Я смог чтобы исправить это для IE 8 и Firefox, модифицировав CSS следующим образом:

body

{

    margin: 0;

}

.siteContent

{   

    width: 960px;

    margin-left: auto;

    margin-right: auto;

    border: thin solid;

    position: relative;

}

.siteContent span{

    position: absolute;

    bottom: 0px;

}

.debug

{

    border: thin solid;

}

После runnig this я получил правильный результат в Mozilla:

Введите описание изображения здесь

Однако это не работает для Chrome и Safary. Как заставить его работать для всех основных браузеров ?

448 3

html css

3 ответов:

Comments

Ничего не найдено.

oezi · Accepted Answer · 2011-03-09 14:40:28

Это происходит потому, что изображение выравнивается по базовой линии текста. попробуйте установить vertical-align: bottom или vertical-align: text-bottom для вашего изображения, чтобы решить эту проблему.

Ivan Ivanić · Accepted Answer · 2011-03-09 17:25:52

Я думаю, что это то, что вы хотите: http://jsfiddle.net/WEF49/3/ Тестировался в IE, chrome и FF. Таким образом, img и span выровнены снизу, а div не имеют дополнительного пространства. Плохая сторона заключается в том, что высота div фиксируется на высоте img. Если вы не возражаете против фиксированной высоты на div, это самое чистое решение.

Html:
<div class="siteContent">
    <img class="debug" src="http://t0.gstatic.com/images?q=tbn:ANd9GcRzjvZihxljFMlEt_IOypeOWYCgPgEvVrZ_DnwVTws5uR_iC_oFIg" /> 
    <span>
        aaa
    </span>
</div>
Css:
.siteContent
{   
    width: 960px;
    height: 213px;
    margin-left: auto;
    margin-right: auto;
    border: thin solid;
    overflow:hidden;
}
.debug
{
    border: thin solid;
}

fatnjazzy · Accepted Answer · 2011-03-09 14:40:21

Попробуйте добавить overflow: hidden в div без высоты +
<span style="clear:both">
        aaa
    </span>
+
<img src="..." style="clear:both" />
Возьмите style= " * " в свой css-файл (ofcource)