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

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

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

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

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

@FLaShiQQ · 06.04.2014, 00:07

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

@MathMath · 06.04.2014, 01:41

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

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

HTML5
1
2
3
4
5
6
7
8
9
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
*, *: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

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

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

DragoHoning

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

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

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

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

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

Решение