2
我正在使用Masonry製作一個簡單的圖庫。CSS Flex中心和砌體JS衝突
https://jsfiddle.net/q6ugvqrg/
砌體實例圖像是在與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/[email protected]/dist/masonry.pkgd.min.js
$('.gallery').masonry({
itemSelector: '.grid-item',
columnWidth: 130,
isFitWidth: true
});