- 0
-
Similar Content
-
By VeraVostro
При настройке Masonry возникает проблема:
ширина блоков регулируется отлично (и в %, и в px), но, когда возникла необходимость сделать один из блоков в 2 раза выше остальных блоков - низкие блоки не занимают пустое место рядом с высоким блоком и получается то что на картинке ниже.
Перепробовала, как мне кажется, все: в инициализации указывала ширину колонки в пикселях, в процентах, добавляла в код grid-sizer, убирала grid-sizer...........
Методом тыка поняла что если увеличить у меня в css ширину блока .grid-item - то колонок становится две - и в таком случае Masonry красиво все располагает.
Код здесь (постаралась оставить только суть).
-
By VeraVostro
Добрый день!
Подскажите, как расположить блоки таким образом как на картинке.
Текстовые блоки, я думаю, можно разместить с помощью Masonry. И напрашивается обернуть эти блоки во #wrapper, разместить его посредине...... Но как быть с моментом что в таком случае фон блоков выходит за пределы #wrapper? Тут же уже не получится задать background для body и размещать весь контент внутри wrapper?....
-
By cyklop77
помогите пожалуйста исправить код или хотя бы укажите на ошибку
у меня задача плотно упаковать блоки в резиновом контейнере. при этом ширина зазоров между блоками и границами контейнера изменяться не должна. это важно так ка большинство подобных плагинов работают за счёт появления и скрытия этих зазоров на орпеденённых ширинах экрана
вот плагин, который работает почти так как мне нужно, даже живой пример есть. вот моя страница jsfiddle , на котрой я реализовал всё то же самое, но она не работает. проблема в том, что блоки не упакованы в стиле masonry
-
By cyklop77
помогите пожалуйста плотно упаковать резиновые блоки. вот моя попытка
пользовался официальной документацией плагина masonry. вот страничка с работающим живым примером, на ней все то же самое, что и в моём примере
-
By Светлана Г.
Здравствуйте!
Впервые решила использовать на сайте библиотеку Masonry.
Вот так подключаю:
<ul id="masonry" class="js-masonry clearfix" data-masonry-options='{ "columnWidth": 210, "itemSelector": ".item", "gutter": 10 }'>
Но при тестировании обнаружилась странная проблема. если страницу просматривать в Safari под Windows 8, то сначала страница выглядит так:
Затем, если изменять ширину экрана вручную, то все встает на свои места.
И еще в других браузерах сначала картинки выстраивались в один вертикальный ряд, а после изменения ширины экрана - также все восстанавливалось.
В чем может быть проблема?
-
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-
Question
erkoam
На сайте web-ui.ru на главной странице хочу сделать динамическое выравнивание элементов. Для CSS-сетки используется Bootstrap 3.3.5, контейнер .row взят за основной контейнер masonry-сетки, а каждый .col-элемент, как элемент сетки, но почему-то идет "наползание" нижних элементов сетки на верхние, подскажите в чем может быть проблема.
Link to comment
Share on other sites
3 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.