Вопрос С Гуру

FXIX · August 21, 2008

Вопрос к гуру. Существует ли решение? Нужно выровнять весь блок по горизонтали.

<div>
<div style="float: left;">1</div>
<div style="float: left;">2</div>
<div style="float: left;">3</div>
<div style="float: left;">4</div>
<div style="float: left;">5</div>
<div style="float: left;">6</div>
<div style="float: left;">7</div>
<div style="float: left;">8</div>
</div>

Edited August 21, 2008 by FXIX

Azadi · August 21, 2008

Простого способа нет, если только ваши блоки не имеют фиксированной ширины. Для фиксированной ширины все достаточно просто: обрамляющий div отбиваете отступом слева на 50%, а потом смещаете каждый плавающий блок влево на половину ширины этого плавающего блока, используя отрицательные отступы.

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

klierik · August 21, 2008

я предложил б вам такое решение:

css:

/*
—————————————————————————————————-
	[2.16 Paging]
—————————————————————————————————-
*/
	div.paging {
		overflow: hidden;

		_zoom: 1;
	}
		div.paging div { 
			*position: relative; 
			*left: 50%; 
			*float: left; 
		}
		div.paging ul {
			display: table;
			margin: 0 auto;

			*position: relative;
			*left: -50%;
			*float: left;
		}
			div.paging li { 
				float: left;
				padding: .083em;
				background-color: #fff; 
				border: .083em solid #a6e1a6; 
				margin: 0 .083em;

				-moz-border-radius: .25em; 
				-webkit-border-radius: .25em;
				border-radius: .25em;

				_width: 1%;
			}
				div.paging a { 
					background: #f2fbf2 url(../img/paging-link-bg.gif) 0 0 repeat-x; 
					text-decoration: none;
					padding: .083em .5em 0;
					font-size: 0.916em;
					height: 1.363em;
					display: block;
					white-space: nowrap;
				}

xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<link href="css/styles.css" rel="stylesheet" media="all" />
</head>

<body>

			<!-- paging -->
			<div class="paging"><div>
				<ul>
					<li><a href="#">‹‹ Назад</a></li>
					<li><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">5</a></li>
					<li><a href="#">6</a></li>
					<li><a href="#">7</a></li>
					<li><a href="#">8</a></li>
					<li><a href="#">9</a></li>
					<li><a href="#">...</a></li>
					<li><a href="#">99</a></li>
					<li><a href="#">Вперед ››</a></li>
				</ul>
			</div></div>

</body>
</html>

обратите внимание на CSS - там есть хаки под IE, которые надо перенести в соответствующие файлы.

Это живой пример, так что лишнее убираем. Главное смысл.

Так же хочу обратить Ваше внимание.

Вы ведь, как я понял, делаете листинг страничек. Подобные задачи рекомендуется писать на UL LI, это "вкуснее" для SEO =)

FXIX · August 22, 2008

Azadi спасибо. Вопрос интересовал как чисто теоретический. При известной ширине решение я знал.

klierik вопрос был именно про зафлоаченные div-ы. То что навигации\менюшки\листинги нужно делать через списки я знаю. Я сам долго бился перед тем как сюда запостить

Кстати чем принципиально отличаются два вида выравнивания div-а?

1.

 div {
width:300px;
margin:0 auto;
}

2.

 div {
width:300px;
position:relative;
left:50%;
margin-left:-150px;
}

Azadi · August 22, 2008

Первый не имеет поддержки IE < 6 (если это еще кого-то волнует) и бесполезен для выравнивания плавающих блоков. Второй является более универсальным, но мне не нравится, что при сильном сужении окна просмотра половина блока уходит за край и он не подходит для блоков неизвестной ширины. Способ klierik'а рассмотрю подробнее, интересное решение.

Sign In

Вопрос С Гуру

Question

FXIX

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Azadi

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

FXIX

Link to comment

Share on other sites

Azadi

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information