Задача на смекалку

lavr-ik · August 25, 2009

<div><img src="img.jpg" width="100" /><p>Какое-то количество текста, причем количество текста разное во всех блоках</p></div>

<div><img src="img.jpg" width="150" /><p>В этом блоке может быть меньше текста</p></div>

<div><img src="img.jpg" width="50" /><p>А в этом наоборот - может быть очень много, вплоть до нескольких предложений и словосочетаний.</p></div>

Блоки обтекают друг друга слева ( float: left; ).

Текст, находящийся в блоке, разумеется, идет в одну строку.

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

Условие: не использовать javascript, чистый CSS (на js решение элементарно). Также не использовать серверное решение жетского присваивания <div style="width: 100px">

Я сейчас копаю в сторону width: inherit.

Edited August 26, 2009 by lavr-ik

Great Rash · August 25, 2009

Чем не устраивает?

<div style="width: 100px;">
<img src="img.jpg" width="100" />
<p>Какое-то количество текста, причем количество текста разное во всех блоках</p>
</div>

lavr-ik · August 26, 2009

Ознакомьтесь с текстом задачи внимательнее: изображения разного размера, причем заранее неизвестного (т.е. нельзя, например, жестко прописать каждому блоку свой класс и свою ширину).

Great Rash · August 26, 2009

Как же это заранее не известного, если у вас в теге <img> стоит атрибут width="150"?

lavr-ik · August 26, 2009

...

Смотри ситуация: каталог товаров, товары добавляются через админпанель каждый день. Размеры изображений самые разные (естественно, что они заранее неизвестны).

Серверное решение в жестком присваивании <div style="width: 100px"> тоже не принимается.

Great Rash · August 26, 2009

Это чем же вам серверное решение не угодило? Один хрен скрипт картинки с размерами добавляет. Зачем придумывать себе лишний геморрой?

lavr-ik · August 26, 2009

Давай не будем офтопить. Есть условия задачи - и все. Жду комментариев по теме.

Great Rash · August 26, 2009

Комментарии по теме:

сделать без скриптов у вас не выйдет

копать в сторону width: inherit; бесполезно, т.к. в этом случае ширина должна быть задана у родителя, т.е. у <div>/

Устраивает?

Justnewone · August 26, 2009

Почитайте тут на сайте или у гугла про inline-block (ie6-7 inline и zoom:1), тогда не надо флоатов. И не начните только сами офтопить "а что это, а как это, неужто никто не даст код..."

mishka · August 26, 2009

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

psywalker · August 26, 2009

С падачи Justnewone всё таки спрошу, а правда, чем так не устраивает:

<!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>display: inline-block;</title>
<style type="text/css">
	*{ margin: 0; padding: 0; border: none;}
		div { 
			display: inline-block;
			border: 1px solid #000;
			text-align: center;
		}	
			*html div { display: inline; zoom:1;}  /* Для ИЕ6 */
			*+html div { display: inline; zoom:1;} /* Для ИЕ7 */

</style>
</head>

<body>
	<div>
		<img src="PositionFixed/blob.png" alt="" />
		<p>Текст, находящийся в блоке, разумеется, идет в одну строку.</p>
	</div>

	<div>
		<img src="PositionFixed/blob.png" alt="" />
		<p>Текст, находящийся в блоке, разумеется, идет в одну строку.</p>
	</div>
		<div>
		<img src="PositionFixed/blob.png" alt="" />
		<p>Текст, находящийся в блоке, разумеется, идет в одну строку.</p>
	</div>
</body>
</html>

Игорь Ермаков · August 26, 2009

А может стоит попробовать так: display:inline-table;

mishka · August 26, 2009

Хоть ктото, кроме Great Rash читал условие задачи??? Почему вы советуете то что ненужно человеку? В условии сказанно: сделать так чтобы блок стал шириной картинки, а текст если его много то становился в несколько строк и не растягивал блок. Может у вас ваши примеры и работают, но у меня нет.

Выход без скрипта невижу. Либо скрипт выполняющийся на стороне клиента, либо скрипт серверный.

Justnewone · August 26, 2009

mishka2 said:
Хоть ктото, кроме Great Rash читал условие задачи??? Почему вы советуете то что ненужно человеку? В условии сказанно: сделать так чтобы блок стал шириной картинки, а текст если его много то становился в несколько строк и не растягивал блок. Может у вас ваши примеры и работают, но у меня нет.
Выход без скрипта невижу. Либо скрипт выполняющийся на стороне клиента, либо скрипт серверный.

А как не работает?

Я хоть и не пробую сам, но кажеца psywalker вполне рабочий пример привел =)

Может у Вас на P приписан nowrap?

Вот топикстартер, кажеца точно прописал, иначе не может быть, чтобы P рвал ширину своего родителя.

Edited August 26, 2009 by Justnewone

mishka · August 26, 2009

Смотрю в фф3.0

Блоки становятся в линию, но их ширина зависит от текста. Если текста много то блок шире картинки, просто картинка по центру становится.

Пример полностью скопировал отсюда, только, естественно, картинки свои вставил

И как вы думаете будет ли работать inline-block в фф2?

Edited August 26, 2009 by mishka2

Justnewone · August 26, 2009

mishka2 said:
Смотрю в фф3.0
Блоки становятся в линию, но их ширина зависит от текста. Если текста много то блок шире картинки, просто картинка по центру становится

а если убрать P?

Или, скажем, P{display:inline}

Edited August 26, 2009 by Justnewone

mishka · August 26, 2009

А проверьте и увидите...

ведь текст это инлайновый елемент и картинка тоже

Justnewone · August 26, 2009

mishka2 said:
И как вы думаете будет ли работать inline-block в фф2?

Ну, конечно не будет, но для него есть решение, если кому-то еще интересен FF2

inline-stack или как-то вроде, запамятовал.

mishka · August 26, 2009

скопируйте код и посмотрите во всех браузерах. Тогда получится конструктивный разговор.

-moz-inline-box

lavr-ik said:
Также не использовать серверное решение жетского присваивания <div style="width: 100px">

Да, ненадо жестко задавать, надо задавать по ширине картинки, если она есть

Edited August 26, 2009 by mishka2

Justnewone · August 26, 2009

Что-то я лопухнул =) и вправду.

В качестве гола престижа набросал решение. Конечно с большим количеством оговорок и с экпрешном для IE6.

А вдруг у кого получится доточить.

<!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>display: inline-block;</title>
<style type="text/css">
	*{ margin: 0; padding: 0; border: none;}
		div {
			position:relative;
			display: inline-block;
			border: 1px solid #000;
			border-width:1px 1px 0 1px;
			text-align: center;
			* display: inline;
			* zoom:1;
		}

	IMG{
		display:block;
	}
	P{
		position:absolute;
		left:-1px;
		width:100%;
		border: 1px solid #000;
		border-width:0 1px 1px 1px;
	}
</style>
</head>

<body>
	<div>
		<img src="img" alt="" width="150" height="50" />
		<p>Текст, находящийся в блоке, разумеется, идет в одну строку.</p>
	</div>

	<div>
		<img src="img" alt="" width="200" height="50" />
		<p>Текст, находящийся в блоке, разумеется, идет в одну строку.</p>
	</div>
		<div>
		<img src="img" alt="" width="150" height="50" />
		<p>Текст, находящийся в блоке, разумеется, идет в одну строку.</p>
	</div>
</body>
</html>

Edited August 26, 2009 by Justnewone

Great Rash · August 26, 2009

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

mishka · August 26, 2009

кхе, кхе... А как текст на абсолюте растянет блок по вертикали?

Justnewone · August 26, 2009

Естественно, я признал сразу что большое количество оговорок. Вдруг человек это увидит и будет сильно радовацца.

Если нет, то только измеряя рисунок и назначаю эту ширину родителю. по другому никак видать.

И все равно, инлайн-блок полюбому лучше чем флоат для таких задач.

Еще лучше наверна дисплей тейбл, но пока живы ослы - это не мой путь =)

psywalker · August 27, 2009

Автор написал топ и свалил, а я между прочим уже не сплю два дня в поисках решения!

Great Rash · August 27, 2009

А нету решения. Может автор занялся ликбезом по серверным скриптам?

psywalker · August 27, 2009

Quote
А нету решения. Может автор занялся ликбезом по серверным скриптам?

Скорее всего, а жаль

Sign In

Задача на смекалку

Question

Link to comment

Share on other sites

26 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

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