Вот такой хитрый абзац=)

getalusk · April 4, 2011

Ребят, подскажите как сделать вот такой вот заголовок. На картинке все нарисовал.

Edited April 4, 2011 by getalusk

swetlana · April 4, 2011

речь о display: inline-block?

getalusk · April 4, 2011

речь о display: inline-block?

Светлана, ес чесно, то я сам не заню как это называется, а что display: inline-block можно попробовать? Извините чт такой деревянный, просто такую штуку не делал, а заказчик хочет именно так.

swetlana · April 4, 2011

если я что-то в чём-то понимаю, то inline-block именно так себя и ведёт.

или display: table-cell. Но это немного нелогично будет, хотя результат тот же самый

psywalker · April 4, 2011

Лови дружище

<!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>Untitled Document</title>
<style type="text/css">
	.wrap { height: 100px; width: 200px; background: red; position: relative;}
	.a { background: #000; color: #fff; position: absolute; bottom: 0;}
</style>
</head>

<body>
	<div class="wrap">
		<div class="a">sdfsdfddfa ads fds ttt teteterer tretertre t</div>
	</div>
</body>
</html>

mishka · April 4, 2011

Светлана, ес чесно, то я сам не заню как это называется, а что display: inline-block можно попробовать? Извините чт такой деревянный, просто такую штуку не делал, а заказчик хочет именно так.

Ну собсно к низу сам прибьешь, а вот насчет того чтобы на всю ширину тянуть бг если более одной строки текста:

<!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">
			.div {
				width: 100px;
				height: 100px;
				border: red 1px solid;
				margin: 20px;
			}
			p {
				margin: 0;
				float: left;
				background: #f00;
			}
		</style>
</head>
<body>
	<div class="div">
		<p>asdasd asdasd asdasd</p>
	</div>
	<div class="div">
		<p>asdasd asdasd</p>
	</div>
</body>
</html>

Макс, обогнал Да и код более подходящий дал.

ТС, вобщем ничего тут сложного, как видишь.

getalusk · April 4, 2011

Ну друзья спасибо большое))) Сейчас чаю попью и сяду разбирать все по косточкам!=)

getalusk · April 4, 2011

Итак я все сделал, все получилось как у вас, но вот загвоздка, переносит он строку, но все равно остается щель справа.

Обьясню почему - я до этого докопался. Потому-что условно выравнивание по горизонтали стаит слева. Вот он и переносит если слово не влезает. А присвоить выравнивание по ширине не получается без указания ширины. Если же присвоить ширину то сразу, будь хоть одна буква сразу черный фон на весь див. Как обойти это коварство. Если не понятно я могу нарисовать. Плин.

SelenIT · April 4, 2011

Обьясню почему - я до этого докопался. Потому-что условно выравнивание по горизонтали стаит слева.

Не может такого быть, если браузер не совсем уж ископаемый. Раз появился перенос — значит, ширина заполнена, по стандарту так. В примере psywalkerа же такой ерунды не возникает (у меня по крайней мере), а значит, дело точно не в "выравнивании".

Хорошо бы увидеть реальную проблемную страницу...

psywalker · April 4, 2011

Да, сделай тестовую страницу.

getalusk · April 5, 2011

Вот, пожалуйста, тестовая страница

Не получается растянуть внутренний блок до конца родительского при переносе, что я только не пробовал.

Searcher · April 5, 2011

В каком броузере? В FF3 все нормально. В IE6 - да косячит. А нужен IE6 ?

getalusk · April 5, 2011

В каком броузере? В FF3 все нормально. В IE6 - да косячит. А нужен IE6 ?

IE6 не так важно, гораздо обиднее что Опера 10 косячит=(.

swetlana · April 5, 2011

Вот Опера:

Что я делаю не так?

SelenIT · April 5, 2011

10-й Оперы в Рунете осталось 4% (почти столько же, сколько IE6), за границей — вообще милликрохи процента. В актуальной 11-й всё отображается как надо. Имхо, можно не париться

getalusk · April 5, 2011

Ладно убедили, просто сделаю паддинги побольше сделаю, чтоб уж уменьшить риски=)

photograf · April 5, 2011

TC, если я правильно понял, то тебе надо было: text-align: justify; указать в css свойствах блока.

psywalker · April 5, 2011

Ладно убедили, просто сделаю паддинги побольше сделаю, чтоб уж уменьшить риски=)

Да, риск огромен)))

getalusk · April 5, 2011

TC, если я правильно понял, то тебе надо было: text-align: justify; указать в css свойствах блока.

Указывал, но без указания ширины блока в Опере10 не работает свойство. А если укажешь ширину, то сразу вся полоска заполняется.

Aleksty · April 5, 2011

Может так нужно?

<!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>Untitled Document</title>
<style type="text/css">
		.wrap { height: 100px; width: 200px; background: red; position: relative;}
		.a { background: #000; color: #fff; position: absolute; bottom: 0; height:20px;}
		.b { background: #000; color: #fff; position: absolute; bottom: 20px; height:20px;}
</style>
</head>

<body>
		<div class="wrap">
				<div class="a">sdfsdfddfa ads fd </div>
				<div class="b">sdfs tttaaggggggggqqqtttttttttt </div>
		</div>
</body>
</html>

getalusk · April 5, 2011

Может так нужно?

<!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>Untitled Document</title>
<style type="text/css">
		.wrap { height: 100px; width: 200px; background: red; position: relative;}
		.a { background: #000; color: #fff; position: absolute; bottom: 0; height:20px;}
		.b { background: #000; color: #fff; position: absolute; bottom: 20px; height:20px;}
</style>
</head>

<body>
		<div class="wrap">
				<div class="a">sdfsdfddfa ads fd </div>
				<div class="b">sdfs tttaaggggggggqqqtttttttttt </div>
		</div>
</body>
</html>

Алексей спасибо большое за работу, завтра посмотрю, а то прям глаза лопаются.

Aleksty · April 5, 2011

Да не за что. Сам учусь, первоклашка....

Sign In

Вот такой хитрый абзац=)

Question

Link to comment

Share on other sites

21 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information