Автоматическое заполнение diva блоками, следующими слева на право

tragbang · October 16, 2011

Доброго времени суток Уважаемые Гуру верстки!

Столкнулся с необходимостью автоматически заполнить блок контентом в несколько столбцов. Как здесь:

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

Применив float-left блоки заполняют пространство слева направо, но получается разрыв по высоте:

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

Вот код для примера:

<!--

#oblogka {
	background-color: #C9F;
	height: 300px;
	width: 200px;
	position: relative;
}
.content {
	background-color: #CCC;
	float: left;
	height: auto;
	width: 90px;
	border: 1px solid #00C;
}
-->
</style>
</head>
<body>
<div id="oblogka">
    <div class="content"><a>Cтрока</a><br/><a>Cтрока</a><br/><a>Cтрока</a><br/></div>
     <div class="content"><a>Cтрока</a><br/><a>Cтрока</a><br/><a>Cтрока</a><br/><a>Cтрока</a><br/></div>
      <div class="content"><a>Cтрока</a><br/><a>Cтрока</a><br/></div>
       <div class="content"><a>Cтрока</a><br/></div>
        <div class="content"><a>Cтрока</a><br/><a>Cтрока</a><br/><a>Cтрока</a><br/></div>
         <div class="content"><a>Cтрока</a><br/><a>Cтрока</a><br/><a>Cтрока</a><br/></div>
          <div class="content"><a>Cтрока</a><br/><a>Cтрока</a><br/><a>Cтрока</a><br/></div>
</div>

Edited October 16, 2011 by tragbang

psywalker · October 16, 2011

http://forum.htmlbook.ru/index.php?showtopic=13589&view=findpost&p=170848

tragbang · October 16, 2011

http://forum.htmlbook.ru/index.php?showtopic=13589&view=findpost&p=170848

Спасибо psywalker. Но к сожалению эти решения не подходят, т.к. при задании минимальной высоты всем блокам, блоки содержащие мало информации будут оставаться полупустыми, а при использовании block:inline, образованная строка будет равна высоте самого высокого блока, т.е. от блока с минимумом контента до следующей строки будет пустое место (много пустого места :facepalmxd: ).

psywalker · October 17, 2011

Могу посоветовать сделать две колонки и туда уже набросать блоков. Иначе наверное только скрипты.

Что-то я запямятовал решение такой задачи на обычном CSS. Самому бы пригодилось. :unsure:

SelenIT · October 17, 2011

На чистом CSS, да для произвольной высоты, да с горизонтальным основным порядком — имхо, вообще никак, и еще долго. Если бы блоки шли сверху вниз, мультиколонки могли бы выручить (возможно, в комплексе с writing-mode для IE8+). А из скриптов вроде как jQuery Masonry как раз "в масть"...

ceil100 · October 18, 2011

как вариант:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
<style type="text/css">

#oblogka {
        background-color: #C9F;
        height: 300px;
        width: 200px;
        position: relative;
}
.content {
        background-color: #CCC;
        float: left;
        height: auto;
        width: 90px;
        border: 1px solid #00C;
}
#left, #right {overflow:hidden;width:90px;}
#left {float: left;}
#right  {float: right;}

</style>
</head>
<body>
<div id="oblogka">
	<div id="left">
		<div class="content">
			<a>Cтрока</a><br/><a>Cтрока</a><br/><a>Cтрока</a><br/>
		</div>
		 <div class="content"><a>Cтрока</a><br/><a>Cтрока</a><br/><a>Cтрока</a><br/><a>Cтрока<
	/a><br/>
		</div>
		<div class="content"><a>Cтрока</a><br/><a>Cтрока</a><br/>
		</div>
	</div>
	<div id="right">
       <div class="content"><a>Cтрока</a><br/></div>

		<div class="content"><a>Cтрока</a><br/><a>Cтрока<
	/a><br/><a>Cтрока</a><br/></div>
			 <div class="content"><a>Cтрока</a><br/><a>Cтрока<
	/a><br/><a>Cтрока</a><br/></div>
			  <div class="content"><a>Cтрока</a><br/><a>Cтрока<
	/a><br/><a>Cтрока</a><br/></div>
	</div>
</div>
</body>
</html>

css тоже не волшебник

Edited October 18, 2011 by ceil100

tragbang · October 19, 2011

Ребята ОГРОМНОЕ Спасибо за Ваши советы.

Решил задачу изменив код php функции, которая выводит контент из массива. Теперь блоки принадлежат к двум разным классам и ими можно управлять.

Sign In

Автоматическое заполнение diva блоками, следующими слева на право

Question

tragbang

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

tragbang

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

ceil100

Link to comment

Share on other sites

tragbang

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information