Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.04.2016, 14:07
Новичок на форуме
Отправить личное сообщение для Xaphan Посмотреть профиль Найти все сообщения от Xaphan
 
Регистрация: 07.04.2016
Сообщений: 3

Как отодвинуть контейнер masonry от левого края
Здравствуйте, возможно ли отодвинуть контейнер masonry от левого края?
Ответить с цитированием
  #2 (permalink)  
Старый 07.04.2016, 17:10
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 1,567

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


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

Таким образом можно двигать контейнер как угодно
Это можно попробовать на сайте http://masonry.desandro.com/options.html
в режиме редактирования Demo в CodePen
Ответить с цитированием
  #3 (permalink)  
Старый 07.04.2016, 18:23
Новичок на форуме
Отправить личное сообщение для Xaphan Посмотреть профиль Найти все сообщения от Xaphan
 
Регистрация: 07.04.2016
Сообщений: 3



Вот результат.
<!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;
	}
Ответить с цитированием
  #4 (permalink)  
Старый 08.04.2016, 09:31
Новичок на форуме
Отправить личное сообщение для Xaphan Посмотреть профиль Найти все сообщения от Xaphan
 
Регистрация: 07.04.2016
Сообщений: 3

Вопрос снят. Сам нашел решения. Надо поместить контейнер в отдельный слой и уже ему задавать отступ
Ответить с цитированием
  #5 (permalink)  
Старый 13.08.2017, 09:42
Новичок на форуме
Отправить личное сообщение для tsymbal Посмотреть профиль Найти все сообщения от tsymbal
 
Регистрация: 13.08.2017
Сообщений: 2

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>
Ответить с цитированием
  #6 (permalink)  
Старый 13.08.2017, 09:43
Новичок на форуме
Отправить личное сообщение для tsymbal Посмотреть профиль Найти все сообщения от tsymbal
 
Регистрация: 13.08.2017
Сообщений: 2

Заранее благодарю откликнувшихся. Все перепробовала.
Ответить с цитированием
  #7 (permalink)  
Старый 21.08.2017, 17:23
Аватар для ALEKS177
Новичок на форуме
Отправить личное сообщение для ALEKS177 Посмотреть профиль Найти все сообщения от ALEKS177
 
Регистрация: 14.08.2017
Сообщений: 6

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 11:29
Как сделать в объекте ссылку на объект - контейнер? hrustbb Events/DOM/Window 3 17.12.2013 16:43
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 13:25
Как сделать, чтобы при изменинении масштабов сайта, он был по середине, а не с края wayzer Элементы интерфейса 7 02.10.2012 15:30
Может кто подсказать как можно сделать submit из левого фрейма в правый maxander Internet Explorer 1 28.11.2008 09:15