Question

我正在使用Masonry创建一个简单的图片库。

砌体示例图片位于包含max-width和margin auto中心的div容器中。

html body设置为css flex，用于我页面上的其他元素。

如果我使用flex和margin auto中心，则砌体停止工作。

砌体CSS冲突

body {
  display: flex;
  flex-direction: column;
}

.container {
  margin: 0 auto;
}

将css正文代码添加到我的jsfiddle示例中以查看。

HTML

 <div class="container">

  <!-- Gallery -->
  <div class="gallery" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 130 }'>

    <div class="grid-item">
      <img src="https://i.imgur.com/Rl9CUbF.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/LwzLtKh.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/V7xsUgj.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/pCfp0Gk.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/LwzLtKh.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/Rl9CUbF.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/pCfp0Gk.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/V7xsUgj.jpg">
    </div>

  </div> <!-- Gallery End -->

</div>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {

  background: #eadcca;
}
.container {
  margin: 0 auto;
  max-width: 680px;
  padding: 1em;
  background: white;
  border: 1px solid black;
}

.gallery img {
  display: block;
  width: 120px;
  padding: 4px;
}

JS

https://unpkg.com/masonry-layout@4.1.1/dist/masonry.pkgd.min.js

$('.gallery').masonry({
  itemSelector: '.grid-item',
  columnWidth: 130,
  isFitWidth: true
});

Answer 1

.container需要宽度。由于您已定义max-width，因此您可以使用width: 100%;

＆＃13;

$('.gallery').masonry({
  itemSelector: '.grid-item',
  columnWidth: 130,
  isFitWidth: true
});

＆＃13;

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {

  background: #eadcca;
}
.container {
  margin: 0 auto;
  max-width: 680px;
  padding: 1em;
  background: white;
  border: 1px solid black;
}

.gallery img {
  display: block;
  width: 120px;
  padding: 4px;
}
body {
  display: flex;
  flex-direction: column;
}
.container {
  margin: 0 auto;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4.1.1/dist/masonry.pkgd.min.js"></script>
 <div class="container">

  <!-- Gallery -->
  <div class="gallery" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 130 }'>
  
    <div class="grid-item">
      <img src="https://i.imgur.com/Rl9CUbF.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/LwzLtKh.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/V7xsUgj.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/pCfp0Gk.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/LwzLtKh.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/Rl9CUbF.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/pCfp0Gk.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/V7xsUgj.jpg">
    </div>
    
  </div> <!-- Gallery End -->
  
</div>

＆＃13;

CSS Flex Center和Masonry JS冲突

1 个答案: