砌体 - 如何阻止砌体将我所有的网格项目向左浮动？答案

【问题标题】：Masonry - how to stop Masonry floats all my grid items to left?砌体 - 如何阻止砌体将我所有的网格项目向左浮动？
【发布时间】：2016-12-13 08:21:43
【问题描述】：

如何证明砌体网格项目居中？

似乎 Masonry 将我的所有网格项目都向左浮动或将内容向左对齐：

 <div class="wrap">
  <div class="parent grid">
    <div class="grid-item"><div>1</div></div>
    <div class="grid-item"><div>2</div></div>
    <div class="grid-item"><div>3</div></div>
    <div class="grid-item"><div>4</div></div>
    <div class="grid-item"><div>5</div></div>
  </div>
</div>

CSS：

* {
    box-sizing: border-box;
    font-family: Arial, Sans-serif;
}

.wrap {
    background: #FFD54F;
    text-align: center;
}

.parent {
    text-align: center;
    width: 600px;
    display: inline-block;
    border: 1px solid black;
}

.parent > div {
    width: 200px;
    height: 100px;
    background: white;
    margin:5px;
    padding:20px;
    display: inline-block;
}

.parent > div > div {
    font: bold 30px Arial, Sans-serif;
    color: white;
    width: 50px;
    height: 50px;
    background: #FAB400;
    border-radius: 50%;
    padding: 9px;
    text-align:center;
}

jsfiddle

我想要实现的是：

有可能吗？

【问题讨论】：

砌体浮动不是物理浮动，有绝对定位的块，它们也不能像在任意宽度的容器中那样居中。在您的布局中是否可以使外部容器宽度适合块 - jsfiddle.net/w2bdebfL/4？

标签： jquery html css grid masonry

【解决方案1】：

您可以将另一个容器添加到.parent 并将其宽度设置为恰好包含边距的子元素的大小并将其显示在中心。看看这个：

.parent {
    text-align: center;
    width: 60%;
    display: inline-block;

}
.parent-parent{
  width: 60%;
  border: 1px solid black;
  margin: 0 auto;
}

Sample

【讨论】：

我使用百分比，所以响应能力仍然存在。
如果你仔细看，它并不是真正居中的。
将.parent的width调整为子元素width

【解决方案2】：

最好的事情，我认为您可以为此使用 flex。

此链接可帮助您修改有关 flex 的任何内容all about flex

这是我用你的小提琴重写的代码

$('.grid').masonry({
    // options
    itemSelector: '.grid-item',
    percentPosition: true
});

* {
        box-sizing: border-box;
        font-family: Arial, Sans-serif;
    }

    .wrap {
        background: #FFD54F;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .parent {
        width:600px;
        border: 1px solid black;
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        justify-content:center;
    }
    .grid{
      display:flex;
      flex-direction:column;
      flex-wrap:wrap;
      width:430px;
      height:100%;
    }
    .parent .grid-item {
        width: 200px;
        height: 100px;
        background: white;
        margin:5px;
        padding:20px;
        
    }

    .grid-item div {
        font: bold 30px Arial, Sans-serif;
        color: white;
        width: 50px;
        height: 50px;
        background: #FAB400;
        border-radius: 50%;
        padding: 9px;
        display:flex;
        align-items:center;
        justify-content:center;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="parent">
   <div class="grid">
    <div class="grid-item"><div>1</div></div>
    <div class="grid-item"><div>2</div></div>
    <div class="grid-item"><div>3</div></div>
    <div class="grid-item"><div>4</div></div>
    <div class="grid-item"><div>5</div></div>
   </div>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>

【讨论】：