Равномерное распределение блоков по горизонтали

@LEXXX_NF · October 20, 2008

Всем здрасти.

На днях столкнулся с совершенно не ориднарной (для меня) проблемой. Попробую объяснить суть на примере.

Есть блок, ширина которого меняется. Внутри него нужно равномерно распределить 5 картинок шириной в 50px каждая, причем так, чтобы левая картинка была прижата к левому краю (без отступов), правая - к правому, а 3я была бы точно по центру. В добавок к этому расстояния между картинками должно быть одинаковым.

Все, что я сумел придумать, либо дает отступы у крайних картинок, либо не одинаковые расстояния (

DjTarik · October 20, 2008

А если попробовать засунуть ваши картинки в дивы, прописать к ним float: left; width: 20% (т.е. одинаковое расстояние для каждой); - а уже потом в дивах прописывать позиционирование и отступы...

@LEXXX_NF · October 20, 2008

У меня так просто не вышло. Дело в том, что на крайний левый и крайний правый дивы должно приходиться не 20%, а меньше, так как у картинок внутри них не должно быть отступов слева и справа - соответственно для крайнего левого и крайнего правого дива.

А если сделать крайние дивы отдельно от остальных, то не получается соблюсти расстояние между ними и соседними.

Как тут выкрутиться - не знаю ((

@LEXXX_NF · October 20, 2008

Вроде сам справился. Если кому интересно:

<html>
  <head>
	<title>Выравнивание</title>
	<style>
	.container {
	  width: 60%;
	  margin: 0 auto;
	  border: 1px solid green;
	}
	.img1, .img2 {
	  width: 50px;
	  height: 50px;
	  border: 1px solid blue;
	  float: right;
	}
	.img1 {
	  float: left;
	}
	.wrap {
	  margin-left: 52px;
	}
	.wr {
	  width: 25%;
	  float: left;
	}
	.clear {
	  clear: both;
	}
	</style>
  </head>
  <body>
	<div class="container">
	  <div class="img1"></div>
	  <div class="wrap">
		<div class="wr">
		  <div class="img2"></div>
		</div>
		<div class="wr">
		  <div class="img2"></div>
		</div>
		<div class="wr">
		  <div class="img2"></div>
		</div>
		<div class="wr">
		  <div class="img2"></div>
		</div>
	  </div>
	  <div class="clear"></div>
	</div>
  </body>
</html>

hmelii · October 20, 2008

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


	.sub{width:100%; display:inline-block; height:0; line-height:0; font-size:0; }
	.over{border:1px solid red; font-size:0; line-height:0; text-align:justify;}

	/*IE6*/* html .sub{display:inline;}
	/*IE7*/* + html .sub{display:inline;}
</style>
</head>

<body>
	<div class="over">
		<img width="50" height="50" src="bg.png" alt="" />	
		<img width="50" height="50" src="bg.png" alt="" />	
		<img width="50" height="50" src="bg.png" alt="" />	
		<img width="50" height="50" src="bg.png" alt="" />	
		<img width="50" height="50" src="bg.png" alt="" />	
		<div class="sub in"></div>
	</div>
</body>
</html>

Зацени мое решение Врят ли кто нибуть придумает лучше !!!

Посетить мою домашнюю страницу

@LEXXX_NF · October 20, 2008

Врят ли кто нибуть придумает лучше !!!

Уж это точно! Никогда бы до такого не додумался.

hmelii · October 20, 2008

Уж это точно! Никогда бы до такого не додумался.

Тебя оно устраивает ?

@LEXXX_NF · October 20, 2008

Тебя оно устраивает ?

Да, вполне.

sokos · October 20, 2008

HTML:

<img src="images/shape-red.png">
<div id="movers-row">
<div><img src="images/shape-green.png"></div>
<div><img src="images/shape-yellow.png"></div>
<div><img src="images/shape-blue.png"></div>
</div>

CSS:

#movers-row {
margin: -120px 0 0 120px;
}#movers-row div {
width: 33.3%;
float: left;
}
#movers-row div img {
float: right;
}

Источник

Argus · October 20, 2008

решение от @LEXXX_NF как-то не работает в IE6 (в суть не вникал правда).

hmelii предложил весьма оригинальное решение Но оно только в IE и работает

sokos · October 20, 2008

del

Edited October 20, 2008 by sokos

rash · October 20, 2008

hmelii предложил весьма оригинальное решение Но оно только в IE и работает

Нет, это решение работает не только в IE.

@LEXXX_NF · October 20, 2008

Нет, это решение работает не только в IE.

Но в опере 9.6 явно какая-то фигня твориться. Однако это удалось вылечить задав свойства класса так:

.over{border:1px solid red; height:50px; text-align:justify;}

Edited October 20, 2008 by @LEXXX_NF

Argus · October 20, 2008

Нет, это решение работает не только в IE.

а где ещё?

hmelii · October 20, 2008

Но в опере 9.6 явно какая-то фигня твориться. Однако это удалось вылечить задав свойства класса так:
.over{border:1px solid red; height:50px; text-align:justify;}

Да действительно забыл протестировать в опере Там не множко касячит Твой лечение подходит но Если мы хотим чтоб при уменьшении разрешения картинки перекатывались на другую строку то наверное лучше так

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

	.sub{width:100%; display:inline-block; font-size:0; line-height:0;}
	.over{border:1px solid red; text-align:justify; line-height:0;}
	/*IE6*/* html .sub{display:inline;}
	/*IE7*/* + html .sub{display:inline;}
</style>
</head>

<body>
	<div class="over">
		<img width="50" height="50" src="bg.png" alt="" />	
		<img width="50" height="50" src="bg.png" alt="" />	
		<img width="50" height="50" src="bg.png" alt="" />	
		<img width="50" height="50" src="bg.png" alt="" />	
		<img width="50" height="50" src="bg.png" alt="" />	
		<div class="sub"></div>
	</div>
</body>
</html>

Теперь работает во всех ультро модных браузерах opera9.6 mozilla3.0 safari3.0 crome и в классических ie6 ie7

Edited October 20, 2008 by hmelii

EnvIT · August 14, 2011

Создаём новую тему! А так же предоставляем скриншоты того, как нужно и как не нужно, чтобы было.

Создаём новую тему! А так же предоставляем скриншоты того, как нужно и как не нужно, чтобы было.

Это не тема а продолжение темы "Равномерное распределение блоков по горизонтали", верни на место. Ты не прав. Размещение с помощью псевдо :after, а не через дополнительный блок div.

Откуда текст теперь брать??? Заново печатать? С "Равномерное распределение блоков по горизонтали"?

Edited August 14, 2011 by EnvIT
Создание темы в чужом посте

SelenIT · August 14, 2011

Вот в этой теме разве не все точки над сабжем расставлены?

EnvIT · August 15, 2011

Вот в этой теме разве не все точки над сабжем расставлены?

Не совсем, вместо li.helper хотелось бы увидеть li:last-child:after и тем самым избавиться от лишнего элемента в коде.

veleg · July 3, 2012

dell

Edited July 3, 2012 by veleg

Sign In

Равномерное распределение блоков по горизонтали

Question

Link to comment

Share on other sites

18 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

Join the conversation

Обсуждения

Important Information