Форум

Xaphan · #1 (**permalink**) 07.04.2016, 14:07

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

Dilettante_Pro · #2 (**permalink**) 07.04.2016, 17:10

Xaphan,
В классе grid указать параметр left,
например

.grid {
  left:200px;
................
................ 
}

это можно сделать и программным путем, например

$('.grid').css('left','200px');

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

Xaphan · #3 (**permalink**) 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 · #4 (**permalink**) 08.04.2016, 09:31

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

tsymbal · #5 (**permalink**) 13.08.2017, 09:42

Здравствуйте! Делаю свой первый сайт, взяла в помощь шаблон. Мне нужно сделать приличную фотогалерею и пытаюсь добавить блоки в masonry grid. В исходном варианте 5 блоков, отображаются нормально. По этому же принципу пытаюсь добавить еще 5, и пошло смещение к экрану, изменение размеров, вообщем, неправильно. Marginы тоже вроде везде одинаковые.

<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">

<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>

</div>
</div>


</div>
</div>

tsymbal · #6 (**permalink**) 13.08.2017, 09:43

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

ALEKS177 · #7 (**permalink**) 21.08.2017, 17:23

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

Форум

Справочник

Discord чат

Курсы javascript