0
Masonry 그리드 내부에 아이템을 집중 시키려고합니다. 필자는 그리드 자체를 중앙에 배치하는 것에 관한 많은 관련 게시물을 읽고 시도했지만 항목에는 아무런 영향을 미치지 않았습니다.벽돌 센터 아이템
지금까지 시도했습니다 무엇 :
- 는
- 는
- 추가하려고 용기에
margin 0 auto를 추가하는 시도 fitwidth 옵션을 추가/제거/제거 배수구 - 를 추가/제거 너비.
내가 문제
$(document).ready(function() {
var $container = $(".grid");
$container.masonry({
// options
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
gutter: 20,
fitWidth: true,
});
$container.imagesLoaded(function() {
$container.css({
opacity: 0,
visibility: "visible"
}).animate({
opacity: 1.0
}, 300);
//$container.show();
$container.masonry('layout');
});
});body {
display: flex;
flex-direction: column;
}
.wrapper {
width: 1260px;
border: solid 2px red;
}
.grid {
max-width: 1260px;
width: 100%;
margin: 0 auto;
border: 1px solid #f2f2f2;
overflow: hidden;
padding: 0 0 2em;
visibility: hidden;
background: rgba(0, 255, 0, .1);
}
.grid-item,
.grid-sizer {
display: block;
padding: 1.5em;
margin: 0 0 1.5em;
background: #fff;
width: 23%;
}<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<body>
<main id="content" class="content" role="main">
<div class="wrapper">
<section class="grid">
<div class="grid-sizer"></div>
<article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
<p>hey there how ya doin' today ?
</p>
</article>
<article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
<p>Hello world !</p>
</article>
<article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
<p>hey there how ya doin' today ?
</p>
</article>
<article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
<p>Hello world !</p>
</article>
</section>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
var $container = $(".grid");
$container.masonry({
// options
itemSelector: '.grid-item',
columnWidth: 400,
fitWidth: true,
});
$container.imagesLoaded(function() {
$container.css({
opacity: 0,
visibility: "visible"
}).animate({
opacity: 1.0
}, 300);
//$container.show();
$container.masonry('layout');
});
});
</script>
</body>을 나타 내기 위해 조각을 만든 녹색 부분에 작은 녹색 왼쪽에 공간 만이 존재 마지막 하나와 오른쪽 사이에 많은 공간이 있습니다. 어떻게 동등한 공간을 관리 할 수 있습니까? 나는 명백한 무엇인가 놓치고 있다고 꽤 확신한다. 그러나 나는 무엇인가 발견 할 수 없다.