Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
DragoHoning
0 / 0 / 0
Регистрация: 02.04.2014
Сообщений: 1
#1

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

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

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

пример нужного результата.
0
Миниатюры
Можно ли без js сверстать плавающие блоки?  
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
05.04.2014, 16:16
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Можно ли без js сверстать плавающие блоки? (HTML, CSS):

плавающие блоки
<div id="one"> <div class="two">text</div> <div...

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

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

Плавающие блоки
Пытаюсь разобраться с разделом плавающие блоки и что то не получается вот код ...

Плавающие резиновые блоки
Задача состоит в том что бы заставить обтекать не плавающий блок. <html>...

Плавающие блоки float
Здравствуйте. Не могу понять логику в данном примере...

4
FLaShiQQ
1 / 1 / 1
Регистрация: 13.12.2013
Сообщений: 13
06.04.2014, 00:07 #2
С помощью html5 и css3 можно сверстать всплывающие окна. Но вот старые браузеры, поймут ли...
0
MathMath
29 / 29 / 9
Регистрация: 03.03.2014
Сообщений: 58
06.04.2014, 01:41 #3
Лучший ответ Сообщение было отмечено как решение

Решение

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

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

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; }
0
Миниатюры
Можно ли без js сверстать плавающие блоки?  
Vladislav WebDev
324 / 214 / 97
Регистрация: 04.11.2012
Сообщений: 638
06.04.2014, 03:03 #4
Или можно тупо с относительным позиционированием заморочиться.
0
GalaX
698 / 570 / 59
Регистрация: 18.11.2008
Сообщений: 2,147
06.04.2014, 04:47 #5
еще проще - делим блоки по группам, а в "группах" уже дополнительные блоки
если нормально сделать, то все будет кроссбраузерно
0
06.04.2014, 04:47
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
06.04.2014, 04:47
Привет! Вот еще темы с решениями:

Плавающие блоки не видят текст
Ребята, Срочно нужна ваша помошь! Значит так.. есть блок &lt;div...

Плавающие блоки неопределенной высоты
работаю над галереей, разрезинил div c изображениями добавив float:left все...

Сверстать блоки, используя float
Имеется картинка, к которой я должен придти. Не могу понять, как в нужное...

Как сверстать блоки по заданному шаблону
Здравствуйте, не получается сделать так же. Код html: &lt;div class=&quot;case&quot;&gt;...


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

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru