Question

图像以完整尺寸显示在单列中。石工似乎根本没有做任何事情。我将发布一些代码。请注意，自从我使用HTML / CSS以来已经有好几年了，这可能是我做的最基本的错误

为更全面地了解我的情况，以下是我正在使用的确切文件： https://github.com/bryanwillis7/artistWebsite index.html是主文件。 CSS位于css / custom.css中。

HTML：

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth":200 }'>
        <div class="grid-item grid-item--width2"><img src="art/yugioh.jpg" class="art"></img></div>
        <div class="grid-item grid-item--width2"><img src="art/splashwoman.png" class="art"></img></div>
        <div class="grid-item grid-item--width2"><img src="art/shrinking_shroom.png" class="art"></img></div>
        <div class="grid-item grid-item--width2"><img src="art/sam_sip.png" class="art"></img></div>
        <div class="grid-item grid-item--width2"><img src="art/melia.png" class="art"></img></div>
</div>

CSS：

div.grid-item {
  width: 200px;
  float: left;
}

div.grid-item--width2 {
  width: 400px;
}

div.grid-item--width3 {
  width: 600px;
}

div img.art {
  display: block;
  width: 100%;
  height: auto;
  float: left;
}

Answer 1

由于我无法发表评论，您检查了吗？

Cannot initialize Masonry with JQuery

据我了解，您必须使用JavaScript或jquery来初始化砌体

无法使砖石与HTML初始化一起使用

1 个答案: