Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.82/11: Рейтинг темы: голосов - 11, средняя оценка - 4.82
DragoHoning

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

05.04.2014, 16:16. Показов 2068. Ответов 4
Метки нет (Все метки)

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

пример нужного результата.
Миниатюры
Можно ли без js сверстать плавающие блоки?  
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
05.04.2014, 16:16
Ответы с готовыми решениями:

Плавающие блоки
Подскажите пожалуйста, нужно реализовать плавающие сайдабры на странице. Использую библиотеку http://stickyjs.com/ . Но получается не очень...

Плавающие блоки
Есть два блока table , но один стоит на месте с лева , а другой в низу новости, а должны быть справа , как мне его поднять ?

Плавающие блоки
Не знал как назвать этот вопрос/проблему. У меня действительно проблема. Искал в интернете, видимо плохо, но нет идей чего бы спросить и...

4
 Аватар для FLaShiQQ
3 / 3 / 1
Регистрация: 13.12.2013
Сообщений: 13
06.04.2014, 00:07
С помощью html5 и css3 можно сверстать всплывающие окна. Но вот старые браузеры, поймут ли...
0
 Аватар для MathMath
29 / 29 / 9
Регистрация: 03.03.2014
Сообщений: 58
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; }
Миниатюры
Можно ли без js сверстать плавающие блоки?  
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
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
06.04.2014, 04:47
Помогаю со студенческими работами здесь

плавающие блоки
&lt;div id=&quot;one&quot;&gt; &lt;div class=&quot;two&quot;&gt;text&lt;/div&gt; &lt;div class=&quot;three&quot;&gt;text&lt;/div&gt; &lt;/div&gt; #one{ overflow: hidden; ...

Плавающие блоки
Пытаюсь разобраться с разделом плавающие блоки и что то не получается вот код &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;link ...

Плавающие блоки float
Здравствуйте. Не могу понять логику в данном примере https://jsfiddle.net/5xqq3a5d/ Почему желтый блок, не влезающий в контейнер,...

Плавающие блоки (jQuery)
Написал такой скриптик: $(document).ready(function() { var top = 4; // Отступ от верхнего края var bottom = 25; // Отступ от...

Плавающие резиновые блоки
Задача состоит в том что бы заставить обтекать не плавающий блок. &lt;html&gt; &lt;head&gt; &lt;style&gt; #all{ ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Загрузка 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
Решили писать научную статью с неким РОманом
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru