2
私はMasonryを使って簡単な画像ギャラリーを作っています。CSS Flex CenterとMasonry JSの衝突
https://jsfiddle.net/q6ugvqrg/
石造例画像はmax-width
とmargin auto
中心とのdivコンテナ内にあります。
html body
は、に設定されています。これは、ページの他の要素に使用されています。
flex
とmargin auto
センターを使用すると、石積みが機能しなくなります。
石造CSS紛争
body {
display: flex;
flex-direction: column;
}
.container {
margin: 0 auto;
}
見るために私のjsfiddle例にそのCSS本体のコードを追加します。
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
});