Jump to content
  • 0

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

AKyHuH

Asked by AKyHuH,

 Share

Question

AKyHuH Explorer

AKyHuH

Posted
Posted (edited)

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

Есть 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 by AKyHuH
Link to comment
Share on other sites
  • Answers 55
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

55 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

Posted
Posted

Вообще в принципе можно таблицей сделать, тогда точно уж ничего не упадёт на следующую строку, а вообще можно ещё так попробовать:

<span style="white-space: nowrap; border: 1px solid #000;">

<a href="#" style=" display: inline-block; border: 1px solid #000; width: 200px;">1</a>

<a href="#" style=" display: inline-block; border: 1px solid #000; width: 200px;">1</a>

<a href="#" style=" display: inline-block; border: 1px solid #000; width: 200px;">1</a>

<a href="#" style=" display: inline-block; border: 1px solid #000; width: 200px;">1</a>

</span>

Link to comment
Share on other sites
  • 0
AKyHuH Explorer

AKyHuH

Posted
  • Author
Posted (edited)

Сейчас HTML код выглядит примерно так... 

.icons {
	margin: 0;
	padding: 0;
}

.icons_conteiner {
	margin: 0 auto;
}

.icon-write,
.icon-addfeatured,
.icon-add-friend
{
	display: block;
	float: left;
	height: 20px;
	width: 16px;
	margin: 3px 10px;
}


			<div class="icons">
				<div class="icons_conteiner">
					<a href="" alt="" class="icon-write"></a>
					<a href="" class="icon-add-friend" alt=""></a>
					<a href="" class="icon-addfeatured"></a>
				</div>
				<div class="conteiner_fix_height"></div>
			</div>

Так вот вся проблема в том, что контейнер icons_conteiner сейчас по ширине равен ширине блока icons, а мне нужно, чтобы он растягивался ровно настолько, на сколько его растягивают три блока внутри него.

Edited by AKyHuH
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Боюсь что такую штуку можно сделать только таблицей, есть ещё средство display: table;, но его не понимают ИЕ6-7, а так бы было так:

<!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 {
	border: 1px solid #000;
 	display: table;
	margin: 0 auto;
}

.icons_conteiner {
	margin: 0 auto;
	border: 1px solid red;
}

.icon-write,
.icon-addfeatured,
.icon-add-friend
{

	height: 20px;
	width: 16px;
	margin: 3px 10px;
}
	</style>
</head>

<body>
			<div class="icons">
				<div class="icons_conteiner">
					<a href="" alt="" class="icon-write">1</a>
					<a href="" class="icon-add-friend" alt="">3</a>
					<a href="" class="icon-addfeatured">4</a>
				</div>
				<div class="conteiner_fix_height"></div>
			</div>
</body>
</html>

либо плавающим его делать, либо свойство таблицы задавать, либо абсолютно позиционировать

Если плавающим, то тогда он не будет одновременно по середине и растягиваться вроде.

Если позиционированием, то также будут проблемы полагаю

А вот таблицы как раз то что нужно

Плавающим - это как?

float: left;

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

аа,раз списки,то можно как тебе такой вариант:

<!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">
	*{ margin: 0; padding: 0;}
		ul { list-style: none; text-align: center;}

			ul li {
				display: inline-block;
				width: 200px;
				height: 300px;
				text-align: left;
				border: 1px solid #000;
				margin: 0 10px;
			}
				ul li a { display: block; color: red; padding: 4px 3px;}

</style>

<!--[if lte IE 7]>
<style type="text/css">
	ul li {
		display: inline;
	}
</style>
<![endif]-->
</head>

<body>
	<ul>
		<li><a href="#">Пункт 1</a></li>
		<li><a href="#">Пункт 2</a></li>
	</ul>
</body>
</html>

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

ИМХО изначальный вариант камрада psywalker'a гораздо лучше именно для кроссбраузерности. Т.к. ИЕ6 понимает inline-block для изначально инлайн-элементов (таких как <span>). А вот <ul> - элемент блочный, поэтому тут будут проблемы в ИЕ.

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
опять же всё упирается в inline-block - IE6 его не понимает... а у меня социалка, мне надо чтобы у всех работало одинакого....

Вы невнимательны:

<!--[if lte IE 7]>

<style type="text/css">

ul li {

display: inline;

}

</style>

<![endif]-->

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted (edited)
а как быть с FF2?

Аппетит приходит во время еды...

Ну как быть, для начала перестать леница, опционально еще можно перестать быть халявщиком и обратица к поиску. Вы же не думаете, что у Вас сверхзадача и что стопицот мильенов раз ее уже не обсосали со всех сторон?

Edited by Justnewone
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
а как быть с FF2?

Это я видел, только по сути это ничего не меняет, display: inline; не дает нужного результата

Ну раз ФФ2 беспокоит, тогда да..тут конечно один вариант - вешаться

Link to comment
Share on other sites
  • 0
AKyHuH Explorer

AKyHuH

Posted
  • Author
Posted (edited)

ну, насколько я понимаю, готового рецепта всё равно нет, первые несколько страниц Гугла во всяком случае его не дали...

у меня есть ещё 1 заготовка... делается также плоский список, но немного иначе:

<!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">
	*{ margin: 0; padding: 0;}
		ul { list-style: none; text-align: center;}

			ul li {
				display: inline;
				border: 1px solid #000;
			}

			ul li a {
				padding: 8px 8px; (иконки о которых шла речь вначел 16х16 писелей)
				margin: 2px 5px;
				background: transparent url('img/img.gif'); (в примере сделаем все икноки одинаковые, на самом деле вся сложность тут в том, что все иконки находятся в одном файле и выводятся путем показа в бэкграунде нужного фрагмента)
			}

</style>

</head>

<body>
	<ul>
		<li><a href="#">Пункт 1</a></li>
		<li><a href="#">Пункт 2</a></li>
	</ul>
</body>
</html>

FF, Opera, Хром вроде бы воспринимают такой вариант, а вот IE отказывается показывать бэкграунд, если между <a href=#> и </a> ничего нет... если же туда поставить символ пробела, тогда появляются ненужные подчеркивания от ссылок...

Edited by AKyHuH
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
я там внизу добил в чем собственно вопрос :( я же не просто чтобы похвастать выложил ;)

а если попробовать так: :)

ul li a {

padding: 8px 8px; (иконки о которых шла речь вначел 16х16 писелей)

margin: 2px 5px;

background: red;

zoom:1;

}

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
хм, работает... а что это за свойство такое? у меня даже код под ним не подсвечивается, сдается мне о валидации тут речь не идет?;)

а это я придумал, моё свойство, писал его на JS, даа, оно не валидно к сожалению, щас вот пытаюсь его допрограммировать до валидности

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
хм;) ну ладно, пусть я буду нуб :( но всё же ищу валидные варианты... сча вот ещё один испытываю, что если текст между <a href=#>бла-бла</a> просто убрать в невидимую область

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

Link to comment
Share on other sites
  • 0
rus Explorer

rus

Posted
Posted
а это я придумал, моё свойство, писал его на JS, даа, оно не валидно к сожалению, щас вот пытаюсь его допрограммировать до валидности

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
считай меня идеалистом, но не спится спокойно, если знаю, что в браузере у какого-нить старого въетнамского шпиона моя страница расползется в разные стороны...

а ты слышал что нибудь про Кондишн комметс?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept