Question

不是真正的代码/脚本人，所以请记住。我正在为我的照片做一个简单的页面。我想通过让一个图像加倍大小来打破它。一幅图像为125像素，较大的图像为255像素。 5px排水沟，底部边距为5px（因此较大的是255而不是250）。

更大的图像会进入下一列，其中两个较小的对象会进入下一列。

CSS

    #grid {
    margin-top:15px;
}
.griditem {
    width:125px;

}
.griditem.250 {
    width:255px;
}
.griditem img {
    margin-bottom:5px;

}

HTML

<div id="grid">
                <div class="griditem"><img src="images/tableTemp125.jpg" width="125" height="125" /></div>
                <div class="griditem"><img src="images/tableTemp125.jpg" width="125" height="125" /></div>
                <div class="griditem"><img src="images/tableTemp125.jpg" width="125" height="125" /></div>
                <div class="griditem.250"><img src="images/tableTemp250.jpg" width="255" height="255" /></div>
                <div class="griditem"><img src="images/tableTemp125.jpg" width="125" height="125" /></div>
                <div class="griditem"><img src="images/tableTemp125.jpg" width="125" height="125" /></div>
                <div class="griditem"><img src="images/tableTemp125.jpg" width="125" height="125" /></div>
                <div class="griditem"><img src="images/tableTemp125.jpg" width="125" height="125" /></div>
                <div class="griditem"><img src="images/tableTemp125.jpg" width="125" height="125" /></div>
                <div class="griditem"><img src="images/tableTemp125.jpg" width="125" height="125" /></div>
          </div>

以下是我如何初始化它：

<script>
var container = document.querySelector('#grid');
var msnry = new Masonry( container, {
  // options
  columnWidth: 125,
  gutter: 5,
  itemSelector: '.griditem'

});</script>

Answer 1

CSS类名不能包含“。”。您的问题是您的类属性和CSS选择器有语法错误。当您在CSS中执行.griditem.250 {}时，它与HTML中的class="griditem 250"相对应。这意味着你有一个名为“250”的类，它不能作为类名（必须以字母开头）。在任何情况class="griditem.250"错误。在class属性中指定时，类由空格分隔。没有空格，我们只有一个带有无效字符的类名（。）。

这也使得砌体跳过大项目，因为它的项目选择器试图找到“griditem”而不是“griditem.250”。试试这个

// CSS
.griditem {
    width: 125px;
    ...
}
.w255 {
    width: 255px; // Override width for that element only
}

// HTML
<li class="griditem w255">...</li>
<li class="griditem">...</li>
<li class="griditem">...</li>

砌体不适用于不同尺寸的物品

1 个答案: