karur4n https://blog.hatena.ne.jp/karur4n/ 大学生からの Web 開発 https://karur4n.hatenablog.com/ JavaScript ライブラリ 可変のグリッドレイアウトを実現できる JS ライブラリ、 Masonry は非常に便利でお世話になっているのだが、問題が起こって解決したのでメモ。 問題 以下のように、画像をラップしたブロックを Masonry で配置すると画像の高さが反映されずにブロックが重なって表示されてしまう。 <div class="container"> <div class="item"> <img src="sample1.jpg"> <p>hoge</p> </div> <div class="item"> <img src="sample2.jpg"> <p>fuga</p> </div> <div clas… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fkarur4n.hatenablog.com%2Fentry%2F2014%2F02%2F16%2F175710" title="Masonry を使って要素が重なってしまったときの対処法 - 大学生からの Web 開発" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> http://cdn-ak.f.st-hatena.com/images/fotolife/k/karur4n/20140216/20140216172325.png Hatena Blog https://hatena.blog 2014-02-16 17:57:10 rich https://karur4n.hatenablog.com/entry/2014/02/16/175710 1.0 100%