Как установить div-блок «вертикально-выровнять: снизу» на изображении

Как установить div-блок по вертикали: внизу? (блок DIV должен быть по изображению.)Как установить div-блок «вертикально-выровнять: снизу» на изображении

.block{ 
    background-color:#999999; 
    width:480px;height:100px; 

    position:absolute; 

    display: table-cell; 
    vertical-align:bottom; 
    } 


<div style="display: table; height: 480px; position: relative; overflow: hidden;"> 
    <div class="block">This is the text.</div> 
    <img src="image.jpg" width="480" height="480"/> 
</div>

источник

2011-12-22 user964351

Проблема в том, что вы хотите, чтобы текст был выровнен в нижней части окна? Кажется, ваше решение работает для размещения div над изображением, вот пример: [http://jsfiddle.net/lsirivong/8wjzs/](http://jsfiddle.net/lsirivong/8wjzs/). Я переместил ваш встроенный стиль в css, сделал поле прозрачным, чтобы подчеркнуть оверлей, и прокомментировал некоторые стили, которые не кажутся необходимыми, как указывает Umesh ниже. –

Ой, забыл упомянуть, что я также применил ответ Пурму ниже. –

Изменение vertical-align:bottom в bottom:0.

Таким образом, div будет придерживаться нижней части контейнера (и он работает, поскольку контейнер имеет position:relative).

источник

2011-12-22 03:45:36 Purag

Когда я устанавливаю его снизу: 0, div переходит к нижней части brower. Мне нужно div внизу изображения. – user964351

Это потому, что контейнер не имеет установленной высоты. Вам нужно, чтобы это была высота жидкости? – Purag

Весь ваш код работает, но все свойства стиля не требуются. Я тестировал чуть ниже рабочего кода.

<html> 
<head> 
<style> 
.block{ 
    background-color:#999999; 
    width:480px; 
    height:100px; 
    position:absolute; 
    height: 480px; 
    } 
</style> 
</head> 
<body> 
    <div class="block">This is the text.</div> 
    <img src="image.jpg" width="480" height="480"/> 
</body> 
</html>

Можно попробовать отключить неподготовленный стиль с помощью firebug? Это уменьшит количество строк кода.

источник

2011-12-22 04:21:48

Как установить div-блок «вертикально-выровнять: снизу» на изображении

ответ

Смежные вопросы