Блок, в котором текст выравнивается от низа

Избранный · August 24, 2009

Блок может быть произвольной ширины и высоты (или, если при таком условии это не возможно, тогда допустим он фиксированной высоты в 100 и ширины в 150).

Текст как видите выравнивается от низа.

В случаи двух строк чёрный фон растягивается (или, если при таком условии это не возможно, то на всю длину он не растягивается).

Как?

Great Rash · August 24, 2009

Для начала не плохо бы посмотреть вашу разметку.

Попробовал догадаться что нужно:

<?xml version="1.0" encoding="utf-8"?>
<!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" lang="en">
<head>
	<title>Title</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		img {
			width: 100px;
			height: 100px;
			border: 1px solid;
		}

		dl {
			width: 100px;
			height: 200px;
			position: relative;
		}

		dd {
			position: absolute;
			bottom: 0;
			background: #000;
			color: #fff;
		}
	</style>
</head>
<body>

	<dl>
		<dt>
			<img src="www.ru" alt="" />
		</dt>
		<dd>
			text text
		</dd>
	</dl>

</body>
</html>

Edited August 24, 2009 by Great Rash

mishka · August 24, 2009

<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
	<style type="text/css">
		.holder-image{
			float:left;
			display:inline;
			overflow:hidden;
			position:relative;
			margin:0 20px;
		}
		.holder-image img{
			display:block;
			margin:0;
			border:0;
		}
		.description{
			position:absolute;
			bottom:0;
			left:0;
			color:#fff;
			background:#000;
		}
	</style>
	<script type="text/javascript">
		function startScript(){
			widthBlock();
		}

		function widthBlock(){
			var _block = document.getElementsByTagName('div');
			var _stringHeight = 30;

			for(var i=0; i<_block.length; i++){
				if (_block[i].className.indexOf('holder-image')!=-1){
					var _descriptionBlock = _block[i].getElementsByTagName('div');
					for(var j=0; j<_descriptionBlock.length; j++){
						if (_descriptionBlock[j].className.indexOf('description')!=-1){
							_descriptionBlock[j].style.width=_descriptionBlock[j].parentNode.offsetWidth+'px'
							if (_descriptionBlock[j].offsetHeight<_stringHeight){
								_descriptionBlock[j].style.width='auto';
							}
						}
					}
				}
			}
		}


		if (window.addEventListener){
			window.addEventListener("load", startScript, false);
		} else if (window.attachEvent){
			window.attachEvent("onload", startScript);
		}
	</script>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
	<div class="holder-image">
		<img src="autumn.gif" alt="" />
		<div class="description">
			Lorem ipsum dolor.
		</div>
	</div>
	<div class="holder-image">
		<img src="autumn.gif" alt="" />
		<div class="description">
			Lorem ipsum dolor sit amet consectetuer sed Nam risus risus facilisi.
		</div>
	</div>
	<div class="holder-image">
		<img src="autumn.gif" alt="" />
		<div class="description">
			Lorem ipsum dolor.
		</div>
	</div>
	<div class="holder-image">
		<img src="../ava/mishka150x150.jpg" alt="" />
		<div class="description">
			Lorem ipsum dolor sit amet consectetuer
		</div>
	</div>
</div>
<!-- end wrapper -->
</body>
</html>

_stringHeight это высота блока с описанием если в нем только одна строка

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

_descriptionBlock[j].style.width='auto';

Если в пикселях задать то работает. Может подскажет кто что не так?

s0rr0w · August 25, 2009

display: table-cell рулит

Great Rash · August 25, 2009

display: table-cell рулит

А в ИЕ разве работает?

s0rr0w · August 25, 2009

А в ИЕ разве работает?

А на IE можно забить, и сделать по-другому. Например через expressions

mishka · August 25, 2009

Если на ие можна забить то и "auto" вполне хватает. Кстати может ктонибудь посмотреть как это ведет себя в ие7-ие8, так как они у меня портейблы и неподдерживают джс...

mishka · August 25, 2009

display: table-cell рулит

и никакого джс

только display: table более кроссбраузернее, но с ие6-7 надо както бороться

Sign In

Блок, в котором текст выравнивается от низа

Question

Избранный

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information