Как отодвинуть контейнер masonry от левого края
Здравствуйте, возможно ли отодвинуть контейнер masonry от левого края?
|
Xaphan,
В классе grid указать параметр left, например .grid { left:200px; ................ ................ } это можно сделать и программным путем, например $('.grid').css('left','200px'); Таким образом можно двигать контейнер как угодно Это можно попробовать на сайте http://masonry.desandro.com/options.html в режиме редактирования Demo в CodePen |
Вот результат. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Документ без названия</title> <link href="Style.css" rel="stylesheet" type="text/css"> <script src="jquery-2.1.4.min.js"></script> <script src="masonry.pkgd.min.js"></script> <script> $(document).ready(function() { $('.grid').masonry({ // options itemSelector: '.grid-item', columnWidth: 52 }); }); </script> </head> <body> <div class="grid"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> <div class="grid-item">7</div> <div class="grid-item">8</div> <div class="grid-item">9</div> <div class="grid-item">10</div> </div> </body> </html> @charset "utf-8"; /* CSS Document */ .grid { left:250px; color:#ffffff; width:100%; background:#FF00FF; } .grid-item { background:#0024FF; width:50px; height:50px; border:solid #000000; } |
Вопрос снят. Сам нашел решения. Надо поместить контейнер в отдельный слой и уже ему задавать отступ
|
Masonry grid отступ по левому краю
Здравствуйте! Делаю свой первый сайт, взяла в помощь шаблон. Мне нужно сделать приличную фотогалерею и пытаюсь добавить блоки в masonry grid. В исходном варианте 5 блоков, отображаются нормально. По этому же принципу пытаюсь добавить еще 5, и пошло смещение к экрану, изменение размеров, вообщем, неправильно. Marginы тоже вроде везде одинаковые.
<!-- Masonry Grid --> <div class="masonry-grid row"> <div class="masonry-grid-sizer col-xs-6 col-sm-6 col-md-1"></div> <div class="masonry-grid-item col-xs-12 col-sm-6 col-md-8 margin-b-30"> <!-- Work --> <div class="work work-popup-trigger"> <div class="work-overlay"> <p><img class="full-width img-responsive" src="img/800x400/02.jpg" alt="Portfolio Image"></p> </div> <div class="work-popup-overlay"> <div class="work-popup-content"> <a href="javascript:void(0);" class="work-popup-close">К портфолио</a> <div class="margin-b-30"> <h3 class="margin-b-5">Репортажная съемка ивентов, праздников, мероприятий </h3> <span>Фоторепортаж</span> </div> <div class="row"> <div class="col-sm-8 work-popup-content-divider sm-margin-b-20"> <div class="margin-t-10 sm-margin-t-0"> <p><img class="full-width img-responsive" src="img/800x400/02-2.jpg" alt="Portfolio Image"></p> <p><h5>Предлагаю запечатлеть красочную историю любого важного для Вас события. Фотосъемка детских дней рождения, свадеб, юбилеев, выпускных, корпоративов, концертов, спектаклей, спортивных соревнований и мн. другое. Создайте свою уникальную фотоисторию!</h5> </p> <ul class="list-inline work-popup-tag"> <li class="work-popup-tag-item"><a class="work-popup-tag-link" href="#">Репортаж мероприятия</a></li> <li class="work-popup-tag-item"><a class="work-popup-tag-link" href="#">Съемка корпоративов</a></li> <li class="work-popup-tag-item"><a class="work-popup-tag-link" href="#">Съемка дня рождения</a></li> </ul> </div> </div> <div class="col-sm-4"> <div class="margin-t-10 sm-margin-t-0"> <p class="margin-b-5"><strong>Место съемки:</strong> Кабарете, Доминиканская республика</p> <p class="margin-b-5"><strong>Фотограф:</strong> Ева Цымбал</p> </div> </div> </div> </div> </div> </div> <!-- End Work --> </div> </div> <!-- End Masonry Grid --> </div> </div> |
Заранее благодарю откликнувшихся. Все перепробовала.
|
Подскажите, пожалуйста, как можно реализовать следующую конструкцию:
Текст находится в блоке, выравнивание по центру. При увеличении количества текста и выходе за преднлы контейнера выравнивание выходящего за предела текста по левому краю. Текст в контейнере так же выравнивается по центру Заранее благодарю. |
Часовой пояс GMT +3, время: 10:45. |