Проблема центрирования блоков при резиновой ширины

ziyodjon · June 9, 2010

Как центрировать 4 блока при резиновой ширины #wrapper ?

<style>
/*Blocks*/
	html, body{margin:0; padding:0;}
	#wrapper{width:100%; text-align:center;}
	#wrapper div{float:left;}
	#wrapper .b1,.b2,.b3,.b4{border:1px solid red; min-width:200px;}
	.clear{clear:both;}

</style>

<div id="wrapper">
	<div class="b1">Block-1</div>
	<div class="b2">Block-2</div>
	<div class="b3">Block-3</div>
	<div class="b4">Block-4</div>
	<div class="clear"></div>
</div>

Вид на броузере :

Клик сюда >>>

psywalker · June 9, 2010

Во-первых делай на UL LI, а во-вторых задай всем LI по 25% ширины. Всего их должно быть 4

ziyodjon · June 9, 2010

Во-первых делай на UL LI, а во-вторых задай всем LI по 25% ширины. Всего их должно быть 4

Спасибо за совет на можно в примере ?

ziyodjon · June 9, 2010

Во-первых делай на UL LI, а во-вторых задай всем LI по 25% ширины. Всего их должно быть 4

Спасибо вам я уже сделал поже покажу пример

psywalker · June 9, 2010

Спасибо вам я уже сделал поже покажу пример

Ок, обязательно.

ziyodjon · June 9, 2010

Ок, обязательно.

Вот сделал как обешал ставлю но есть проблема в ИЕ в 5 до 7

<style>

/*Ul blocks*/
	body{font-size:0.8em;}
	*{margin:0; padding:0;}
	#main{margin:0; padding:0; list-style:none;}
	#main li{display:inline; background:#FC6; float:left; width:25%; text-align:center;}
	#main div{background:#FFF; margin:10px;}
</style>

<ul id="main">
	<li><div>HP TouchSmart PC</div></li>
	<li><div>Block-2</div></li>
	<li><div>Block-3</div></li>
	<li><div>Block-4</div></li>
</ul>

Примеры в ИЕ в 5 до 7

Кликните тут

psywalker · June 9, 2010

Ну насчёт ИЕ5 это ты загнул конеш.

Поставь ширину в них чуть меньше, чем везде, они же понимают доли процентов.

ziyodjon · June 9, 2010

Ну насчёт ИЕ5 это ты загнул конеш.
Поставь ширину в них чуть меньше, чем везде, они же понимают доли процентов.

То что ты сказал сделал но блоки начинаются с левой стороны как их центрировать? С margin:0 0 0 5 px; пробовал но этот не выход

Код без маргина и резултать

/*Ul blocks*/
	body{font-size:0.8em;}
	*{margin:0; padding:0;}
	#main{margin:0; padding:0; list-style:none;}
	#main li{display:inline; background:#FC6; float:left; width:24.9%; text-align:center;}
	#main div{background:#FFF; margin:10px;}

Код с маргином и резултать

/*Ul blocks*/
	body{font-size:0.8em;}
	*{margin:0; padding:0;}
	#main{margin:0 0 0 5px; padding:0; list-style:none;}
	#main li{display:inline; background:#FC6; float:left; width:24.9%; text-align:center;}
	#main div{background:#FFF; margin:10px;}

Просто я что хочу как центрировать блоки

psywalker · June 10, 2010

Т.е. тебя не устраивают отступы по бокам?

ziyodjon · June 10, 2010

Т.е. тебя не устраивают отступы по бокам?

Нет меня больше всего устраивают это центрировать 4 блока

psywalker · June 10, 2010

Нет меня больше всего устраивают это центрировать 4 блока

Вот на этой картинке видно, что они центрированы, только есть отступы по бокам. Что не так?

http://www.kroxus.net/screenshots/20100609-384-16kb.jpg

ziyodjon · June 10, 2010

Вот на этой картинке видно, что они центрированы, только есть отступы по бокам. Что не так?
http://www.kroxus.net/screenshots/20100609-384-16kb.jpg

ну написано что при помошью margin а без как ?

psywalker · June 10, 2010

Делай с марджинами, если нормал работает.

sokos · June 11, 2010

Если просто надо растянуть блоки на весь экран и поровну разделить их:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
	body {margin:0;padding:0}
	ul, ul li {margin:0;padding:0;}
	ul li {float:left;list-style:none;width:25%;text-align:center;}
	ul li div {border:3px solid #444;}
</style>

</head>

<body>

<ul>
	<li><div>1</div></li>
	<li><div>2</div></li>
	<li><div>3</div></li>
	<li><div>4</div></li>
</ul>

</body>
</html>

если нужно зацентрировать все блоки и установить конкретную ширину, то добавить в ксс одну строчку c любым указание ширины:

ul {width:1000px;margin: 0 auto}

RodgerFox · November 25, 2012

А давайте поговорим на более интересную тему.

Вот у нас есть резиновые блоки. Но у какого то из них есть бордюры (border) когда мы сжимаем макет, ширина блока уменьшается, но бордюр может выходить на пример с правой стороны странице и делает зазор в 1-2 и более пиксель(зависит от рамки), из-за этого появляется нижний скрол. Да конечно можно убрать его при помощи overflow: hidden; родительскому элементу, а лучше сразу в корень писать... а как еще можно обойти эту вещь?

Sign In

Проблема центрирования блоков при резиновой ширины

Question

Link to comment

Share on other sites

14 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

Join the conversation

Обсуждения

Important Information