Ширина DIV по ширине внутренних блоков

AKyHuH · November 6, 2009

Вопрос наверное глупый, но всё же...

Есть DIV заданной ширины, внутри него есть DIV контейнер, внутри контейнер располагается некоторое число блоков (неизвестное) заданной ширины.

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

В реальности нужно для следующего. Галерея. Cписок картинок. Если вход выполнен под суперюзером, под картинками появляется блок управления из иконок (иконки выполнены как <a href="" style="display: block; width:20px; height: 20px; background: transparent url('img/icon.gif') 0 -100;"></a>), но для разного уровня суперюзеров, иконок может быть разное кол-во от 2 до 5. Нужно, чтобы эти иконки были расположены по центру блока.

Как то так:

 /
 ——————————--
|	 ico1   ico2   ico3		| 
 ——————————--
/

Edited November 6, 2009 by AKyHuH

rus · November 6, 2009

Если честно, то ты странный человек, сам уходишь от лёгких путей в пользу трудных..хм..ну ладно, дело твоё...

Да ладно, ты сам себя то вспомни.

psywalker · November 6, 2009

Макс, а можешь его на php еще написать? А то у меня с js туго, а св-во так нужно!

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

AKyHuH · November 6, 2009

неа, ну просвети, коль не шутишь

psywalker · November 6, 2009

Да ладно, ты сам себя то вспомни.

Я как себя помню, всегда пытался инфу найти в инете, до сих пор ищу

AKyHuH · November 6, 2009

хм, чую в мой огород камень... а тут у нас что, не интернет?

psywalker · November 6, 2009

неа, ну просвети, коль не шутишь

набери в Гугле и прочитаешь

http://designformasters.info/posts/conditional-comments/ к примеру

Edited November 6, 2009 by psywalker

AKyHuH · November 6, 2009

набери в Гугле и прочитаешь
http://designformasters.info/posts/conditional-comments/ к примеру

да я понял о чем ты говоришь, только ещё со школы из курса бейсика усвоил, что там хоть и есть функция goto, но пользоваться ею не комильфо, как говорится, так вот комментс эти - тоже не комильфо... это уход от единых стандартов

psywalker · November 6, 2009

да я понял о чем ты говоришь, только ещё со школы из курса бейсика усвоил, что там хоть и есть функция goto, но пользоваться ею не комильфо, как говорится, так вот комментс эти - тоже не комильфо... это уход от единых стандартов

ххаах, слышал бы тебя кто нибудь..не комильфо Эти вещи специально придуманы для таких случаев, чтобы валидность сохранялась как раз, и ими пользовались всегда, пользуются и будут пользоваться, правда почитай внимательнее статьи, там всё поймёшь

Justnewone · November 6, 2009

да я понял о чем ты говоришь, только ещё со школы из курса бейсика усвоил, что там хоть и есть функция goto, но пользоваться ею не комильфо, как говорится, так вот комментс эти - тоже не комильфо... это уход от единых стандартов

Товарищь, хотите быть перфекционистом - делайте это самостоятельно. Как-то странно у Вас дорога выкладывается в светлое будущее единых стандартов, на плечах других людей, не комильфо.

Пробуйте, вставляйте, пытайтесь. Причем тут мы аще? Решение получил - все, распишись, свободен. Оценки выставлять за ответы = оценки выставлять за качество нашей работы, Вам такого права никто не давал, тем более то опыта у Вас, судя по постам, с Гульки нос.

psywalker · November 6, 2009

Justnewone

Даа тыы чёёё, он же на со школы из курса бейсика усвоил, что ты не прав

AKyHuH · November 6, 2009

Товарищь, хотите быть перфекционистом - делайте это самостоятельно. Как-то странно у Вас дорога выкладывается в светлое будущее единых стандартов, на плечах других людей, не комильфо.
Пробуйте, вставляйте, пытайтесь. Причем тут мы аще? Решение получил - все, распишись, свободен. Оценки выставлять за ответы = оценки выставлять за качество нашей работы, Вам такого права никто не давал, тем более то опыта у Вас, судя по постам, с Гульки нос.

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

ИМХО, вы менее всего помогли мне, так что вам конкретно себя ни чем обязанным не считаю.

Остальным спасибо! В споре рождается истина... и прошу заметить, не я это придумал

Justnewone · November 6, 2009

товарищ, могу ответить вам той же монетой, сей форум есть сугубо добровольное сообщество, в котором у каждого есть право как задать вопрос, так и ответить, поэтому если вы так ревностно относитесь к своим ответам, вам не стоило бы так ими раскидываться, а то вдруг ещё кто-то позволит себе на ваших плечах в светлое будущее улететь, а вы тут так и останетесь, над златом своих ответов чахнуть...
ИМХО, вы менее всего помогли мне, так что вам конкретно себя ни чем обязанным не считаю.
Остальным спасибо! В споре рождается истина... и прошу заметить, не я это придумал

Вы показали себя халявщиком, и я кому надо дал это понять. А до Вас лично мне никакого дела нету. Истина несимметричная получилась, для себя вы что-то выяснили, а ребятам за помощь еще и свое "не комильфо" показали. Жду Вас еще на форуме, приходите, спрашивайте, отвечайте.

Searcher · November 6, 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></title>
<style type="text/css">

* { margin: 0; padding: 0; }

.icons {
	display: table;
	margin: 0 auto;
}

.icons_conteiner {
	border: 1px solid red;
	background-color: #ddd;
	padding: 20px 10px;
}

.icons_conteiner a
{
	margin: 0 1px;
	padding: 10px 13px;
	background-color: blue;
	color: white;
}

.icons_conteiner a:hover{
	background-color: red;
}
</style>

<!--[if IE 6]>
<style type="text/css">
	.icons_block {position:relative;}
	.icons {display: block; position: absolute; top:50%; left:50%;}
	.icons_conteiner {display: block; position: relative; left:-50%;}
</style>
<![endif]-->

</head>

<body>
		<div class="icons_block">
			<div class="icons">
				<div class="icons_conteiner">
					<a href="" alt="">1</a>
					<a href="" alt="">24654</a>
					<a href="" alt="">3</a>
				</div>
			</div>
		</div>
</body>
</html>

psywalker · November 6, 2009

воо,вот этот вариант надо взять на заметочку, спасибо друг

AKyHuH · November 6, 2009

Вы показали себя халявщиком, и я кому надо дал это понять. А до Вас лично мне никакого дела нету. Истина несимметричная получилась, для себя вы что-то выяснили, а ребятам за помощь еще и свое "не комильфо" показали. Жду Вас еще на форуме, приходите, спрашивайте, отвечайте.

Экай вы до чужого добра жадный и сами ничего не посоветовали и другим не даете... Ну да хватит о вас, ваша минута славы на сегодня закончена!

Searcher, у меня, если честно, в IE7 вложенные блоки по левому краю выровнялись... а вот в Опере и ФФ - прям как доктор прописал! Спасибо!

psywalker · November 6, 2009

В ие7 не пашет, потому что опятьже Уловные комменты не содержат уловий в заголовке

<!--[if lte IE 7]>

А насчёт способа не нравится то, что в ИЕ6-7 всё складывается когда окно сужаешь, видимо правда под -50% заделан

Вот это набросок, зацени:

<!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></title>
<style type="text/css">

* { margin: 0; padding: 0; }



	.icons {
		position: relative;
		right: 50%;
		float: right;
	}
	.icons_conteiner {
		position: relative;
		z-index: 1;
		right: -50%;
	}
	a { display: inline-block; margin: 0 10px; border: 1px solid red;}


</style>




</head>

<body>

	<div class="icons">
		<div class="icons_conteiner">
					<a href="" alt="">1</a>
					<a href="" alt="">24654</a>
					<a href="" alt="">3</a>
		</div>
	</div>


</body>
</html>

Edited November 6, 2009 by psywalker

Justnewone · November 6, 2009

Экай вы до чужого добра жадный и сами ничего не посоветовали и другим не даете... Ну да хватит о вас, ваша минута славы на сегодня закончена!

Жадный. Было, есть и будет. Волк - лесной санитар. Хватит так хватит, прекращайте, сядьте, погуглите, найдите решение, поднимите самооценку, что Вы время тут со мной теряете.

psywalker · November 6, 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></title>
<style type="text/css">

* { margin: 0; padding: 0; }

	ul.icons { position: relative; left: 50%; float: left;}
		ul.icons li { position: relative; left: -50%; float: left;}
			ul.icons li a { float: left; margin: 0 10px; border: 1px solid red;}
</style>




</head>

<body>

	<ul class="icons">
		<li><a href="" alt="">1</a></li>
		<li><a href="" alt="">2</a></li>
		<li><a href="" alt="">3</a></li>
		<li><a href="" alt="">4</a></li>
	</ul>


</body>
</html>

AKyHuH · November 6, 2009

psywalker, первое ощущение - реально работает, осталось прикрутить под реальную задачу и проверить ещё раз большое спасибо!

psywalker · November 6, 2009

psywalker, первое ощущение - реально работает, осталось прикрутить под реальную задачу и проверить ещё раз большое спасибо!

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

Searcher · November 9, 2009

да, отличное решение!

psywalker · November 9, 2009

да, отличное решение!

Есс сэр

Searcher · November 9, 2009

psywalker, ты такие рецептики складывай отдельно, когда накопится - можно будет создать сайтик, как тут уже предлагали, ну и я рад буду тебе посодействовать, если понадобится

s0rr0w · November 9, 2009

В процессе создания плагин к форуму, который будет публиковать рецептики на сайте.

Так что все можно будет сделать.

Searcher · November 9, 2009

эх, s0rr0w просто так не отпустит! :)

Sign In

Ширина DIV по ширине внутренних блоков

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

55 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