Плотная упаковка плавающих div по вертикали

#html #css #вёрстка #html5 #css3

Обычные плавающие div выстраиваются в строки с высотой самого высокого элемента. Вот так:


Google+ делает вёрстку на порядок компактней и красивей. Вот так:


Как можно добиться того, чтобы блоки подтягивались вверх, плотнее заполняя пространство?
Желательно - без динамического высчитывания границ каждого элемента и абсолютного позиционирования.
    

Ответы

Ответ 1

Стоит задумываться либо об одинаковости блоков по высоте, либо разбивать на несколько
колонок и их уже заполнять блоками, а можно попробовать одни  влево, другие вправо...
Скорее всего на 2-м скрине сделано в три колонки....
Так же можно воспользоваться свойством марджин коллапс и задать нижние отступы блокам....(но
это при небольших разбегах высоты...)

Примерно вот накидал вариант со столбцами:



#wrapper{
	width:770px;
	outline:1px solid #9F00BF;
}
#cols1{
	width:250px;
	float:left;
	margin:0;
}
#cols2{
	width:250px;
	margin: 5px  260px;
}
#cols3{
	width:250px;
	float:right;
	margin:0;
}

.a4{
	width:245px;
	height:150px;
	background:#66f;
	margin:5px;
}
.a5{
	width:245px;
	height:100px;
	background:#66f;
	margin:5px;
}
.a6{
	width:245px;
	height:150px;
	background:#66f;
	margin:5px;
}
.a7{
	width:245px;
	height:125px;
	background:#66f;
	margin:5px;
}

	

		

		

		

		

	
	

		

		

		

		

	
	

		

		

		

		

	



Ответ 2

Не нашёл нигде CSS/HTML решения. Буду благодарен, если кто подскажет. Но есть вот
такой вариант на jQuery: http://masonry.desandro.com/

Итоговый результат:


Ответ 3

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


  display: block; height:100px width:30%; float:none


Вот так.



.Osnovnoiblock{width:80%;}
.Malyiblock{display: block; height:100px width:30%; float:left; border:1px solid
#000000;}
.text{width:100px;}
Заголовок
Текст в блоке под заголовком
Заголовок
Текст в блоке под заголовком
Заголовок
Текст в блоке под заголовком
Заголовок
Текст в блоке под заголовком
Заголовок
Текст в блоке под заголовком
Заголовок
Текст в блоке под заголовком
Заголовок
Текст в блоке под заголовком
Заголовок
Текст в блоке под заголовком
Заголовок
Текст в блоке под заголовком
Заголовок
Текст в блоке под заголовком
Заголовок
Текст в блоке под заголовком
Заголовок
Текст в блоке под заголовком
Заголовок
Текст в блоке под заголовком
Заголовок
Текст в блоке под заголовком
Заголовок
Текст в блоке под заголовком
Заголовок
Текст в блоке под заголовком
Заголовок
Текст в блоке под заголовком




Css:

.Osnovnoi block{width:80%;}
.Malyi block{display: block; height:100px width:30%; float:none}


Как поведет себя таблица?


Ответ 4

Вариант 1:



.flexboxes {
  display: flex;
  flex-wrap: wrap;
  height:200px;
  flex-direction: column;
}
.flexboxes > div {width:200px;background-color:red;margin:3px;}
.block0 {height: 60px;}
.block1 {height: 80px;}
.block2 {height: 70px;}
.block3 {height: 90px;}
.block4 {height: 80px;}
.block5 {height: 100px;}

  

  

  

  

  

  






Вариант 2 (с использованием скриптов):



$(function() {
  $('.flexboxes').masonry({
    itemSelector: 'div' // обращаемся к пунктам
  });
});
.flexboxes {
  display: flex;
  flex-wrap: wrap;
  height:200px;
  width: 630px;
}
.flexboxes > div {width:200px;background-color:red;margin:3px;}
.block0 {height: 60px;}
.block1 {height: 80px;}
.block2 {height: 70px;}
.block3 {height: 90px;}
.block4 {height: 80px;}
.block5 {height: 100px;}