Можно ли без js сверстать плавающие блоки?

05.04.2014, 16:16. **Показов** 1940. **Ответов** 4

Author24 — интернет-сервис помощи студентам

Есть множество блоков разного размера с информацией. Нужно их разместить так, чтобы место на странице максимально экономилось.

пример нужного результата.

@FLaShiQQ · 06.04.2014, 00:07

С помощью html5 и css3 можно сверстать всплывающие окна. Но вот старые браузеры, поймут ли...

@MathMath · 06.04.2014, 01:41

Если блоки будут одной ширины, но разной высоты, то можно прибегнуть к такому решению: (посмотреть)

Работает только с префиксами и поддерживается: (кликни на меня)

HTML5

<main>
    <div class="b-one"></div>
    <div class="b-two"></div>
    <div class="b-three"></div>
    <div class="b-four"></div>
    <div class="b-five"></div>
    <div class="b-six"></div>
    <div class="b-seven"></div>
</main>

CSS

*, *:before, *:after {box-sizing:  border-box !important;}
 
main {
    -webkit-column-count: 3;
    -webkit-column-gap: 1em;
    -moz-column-count: 3;
    -moz-column-gap: 1em;
    column-count: 3;
    column-gap: 1em;
    width: 768px; 
}
div[class^="b"] {
    display: inline-block;
    margin-bottom: 20px;
    width: 100%;
}
.b-one { height: 100px; background: #443d3d; }
.b-two { height: 250px; background: #f5f5f5; }
.b-three { height: 150px; background: #000; }
.b-four { height: 110px; background: #f5f5f5; }
.b-five { height: 333px; background: #000000; }
.b-six { height: 400px; background: #cc3399; }
.b-seven { height: 300px; background: #996699; }

@Vladislav WebDev · 06.04.2014, 03:03

Или можно тупо с относительным позиционированием заморочиться.

@GalaX · 06.04.2014, 04:47

еще проще - делим блоки по группам, а в "группах" уже дополнительные блоки
если нормально сделать, то все будет кроссбраузерно

DragoHoning
		1
	Можно ли без js сверстать плавающие блоки? 05.04.2014, 16:16. Показов 1940. Ответов 4 Метки нет (Все метки) Есть множество блоков разного размера с информацией. Нужно их разместить так, чтобы место на странице максимально экономилось. пример нужного результата. Миниатюры

@FLaShiQQ 3 / 3 / 1 Регистрация: 13.12.2013 Сообщений: 13
	06.04.2014, 00:07	2
	С помощью html5 и css3 можно сверстать всплывающие окна. Но вот старые браузеры, поймут ли... 0

@Vladislav WebDev 327 / 217 / 97 Регистрация: 04.11.2012 Сообщений: 638
	06.04.2014, 03:03	4
	Или можно тупо с относительным позиционированием заморочиться. 0

@GalaX 701 / 573 / 59 Регистрация: 18.11.2008 Сообщений: 2,147
	06.04.2014, 04:47	5
	еще проще - делим блоки по группам, а в "группах" уже дополнительные блоки если нормально сделать, то все будет кроссбраузерно 0

Можно ли без js сверстать плавающие блоки?

Решение