Выравнивание подписи по нижнему краю рисунка

Ugo · January 13, 2011

Здравствуйте.

У меня есть широкое изображение, подпись к нему, и неограниченное количество текста сверху и снизу.

Как задать ширину изображения в 60% экрана и расположить подпись по нижнему его краю вот таким образом?

Исходный код:

<div class="img">
<img alt="" src="http://designyoutrust.com/wp-content/uploads/2011/01/eli-neugeboren-fashion-monsters-06-600.jpg" />
</div>
<p class="under-picture">Test image sign.</p>
<p class="text">Text text text...</p>

Демонстрировать можно здесь:

http://www.webdevout.net/test?02f

Прошу прощения. Вовсе не собирался спамить. Просто кнопка создания темы никак не реагировала на нажатие, вот я и кликнул по ней несколько раз, списав это на тормоза интернета.

ShumNo · January 13, 2011

На истину не настаиваю на вскидку

.img {
float:left;
text-align:center;
width:60%;
}
p.text {
clear:both;
color:#19963C;
}

Добавил к IMG 60% и float, а к .text clear. все остальное как в примере

Edited January 13, 2011 by ShumNo

Ugo · January 13, 2011

Так в том-то и сложность, что при таком методе, как у вас, подпись уедет вверх.

А нужно, чтобы нижняя граница подписи, и нижняя граница изображения совпадали.

psywalker · January 13, 2011

Думаю должно помочь http://forum.htmlbook.ru/index.php?s=&...st&p=170848

Ugo · January 13, 2011

Интересно, но я не понял, как можно это применить в моём случае

Great Rash · January 13, 2011

У вас должно быть два инлайн-блока (картинка и блок с текстом), выровненные по низу (vertical-align: bottom;). Не проверял, но по идее должно сработать.

UPD:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html {
			font-size: 100.1%;
		}

		body {
			font: 62.5%/1.5em Arial, Tahoma, Verdana, sans-serif;
			color: #000;
			background: #fff;
		}

		.cont {line-height: 0; letter-spacing: -0.3em;}

		span {display: inline-block; vertical-align: bottom; line-height: normal; letter-spacing: normal;}

		span.img {width: 60%; background: green;}
		span.img img {width: 100%; vertical-align: bottom;}

		span.text {width: 40%; background: red;}
	</style>

	<script type="text/javascript">

	</script>
</head>
<body>

	<div class="cont">
		<span class="img">
			<img src="http://i.min.us/jdSbNC.png" alt="" />
		</span>

		<span class="text">
			text <button onclick="this.parentNode.innerHTML = 'text<br />' + this.parentNode.innerHTML">добавить текст</button>
		</span>
	</div>

	<p>
		text text text text text text text text text text text text text 
		text text text text text text text text text text text text text 
		text text text text text text text text text text text text text 
		text text text text text text text text text text text text text 
		text text text text text text text text text text text text text 
		text text text text text text text text text text text text text 
		text text text text text text text text text text text text text 
		text text text text text text text text text text text text text 
		text text text text text text text text text text text text text 
		text text text text text text text text text text text text text 
	</p>

</body>
</html>

Ugo · January 13, 2011

Great Rash, спасибо! Прекрасно работает.

Sign In

Выравнивание подписи по нижнему краю рисунка

Question

Ugo

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

ShumNo

Link to comment

Share on other sites

Ugo

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Ugo

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Ugo

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information