Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как отодвинуть контейнер masonry от левого края (https://javascript.ru/forum/events/62375-kak-otodvinut-kontejjner-masonry-ot-levogo-kraya.html)

Xaphan 07.04.2016 14:07
Как отодвинуть контейнер masonry от левого края
 
Здравствуйте, возможно ли отодвинуть контейнер masonry от левого края?

Dilettante_Pro 07.04.2016 17:10
Xaphan,
В классе grid указать параметр left,
например 
.grid {
  left:200px;
................
................ 
}


это можно сделать и программным путем, например
$('.grid').css('left','200px');

Таким образом можно двигать контейнер как угодно
Это можно попробовать на сайте http://masonry.desandro.com/options.html
в режиме редактирования Demo в CodePen

Xaphan 07.04.2016 18:23


Вот результат.
<!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;
	}

Xaphan 08.04.2016 09:31
Вопрос снят. Сам нашел решения. Надо поместить контейнер в отдельный слой и уже ему задавать отступ

tsymbal 13.08.2017 09:42
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>

tsymbal 13.08.2017 09:43
Заранее благодарю откликнувшихся. Все перепробовала.

ALEKS177 21.08.2017 17:23
Подскажите, пожалуйста, как можно реализовать следующую конструкцию:
Текст находится в блоке, выравнивание по центру. При увеличении количества текста и выходе за преднлы контейнера выравнивание выходящего за предела текста по левому краю. Текст в контейнере так же выравнивается по центру
Заранее благодарю.


Часовой пояс GMT +3, время: 09:35.