0
我試圖在Masonry網格中居中放置物品。我已閱讀並嘗試了很多關於將網格本身居中的相關文章，但沒有爲這些文章提供任何幫助。砌體中心物品
我試過到目前爲止：
- 添加/刪除排水溝
- 添加/刪除的fitwidth選項
- 試圖容器
- 嘗試添加上添加
margin 0 auto/刪除容器上的寬度。
我創建了一個片段來表示問題
$(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>正如你所看到的，綠色的部分有左側小綠地，但有在最後一個和右側之間有很大的空間。 我怎樣才能在那裏擁有平等的空間？我很確定我錯過了一些明顯的東西，但我無法找到什麼。