Question

我有多个div在页面上创建网格图案。每个div的宽度都使用bootstrap设置为全部相等，在这种情况下，将添加类'col-md-3'以使页面宽度各占25％。每个div的高度均为400px或800px。这是我遇到的问题。

根据此问题，解决方案5是实现所需效果所需要做的：Bootstrap row with columns of different height

我已经按照第二个演示进行了操作，但是我没有错误，但是我的网格模式仍然有偏移，有人可以建议吗？

我已经注意到，绝对位置已添加到每个div，他正在使它们彼此重叠而不是位于网格中？

<div class="blockOut row">
    <div class="col-md-3 blocks short">
    </div>
    <div class="col-md-3 blocks short">
    </div>
    <div class="col-md-3 blocks tall">
    </div>
    <div class="col-md-3 blocks short">
    </div>
    <div class="col-md-3 blocks short">
    </div>
    <div class="col-md-3 blocks tall">
    </div>
    <div class="col-md-3 blocks short">
    </div>
    <div class="col-md-3 blocks short">
    </div>
</div>

.blockOut {
    margin-top: 7.5vh;
}

.blocks {
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: .5s ease-in-out;
}

$( document ).ready(function() {
    $('.row').masonry({
      itemSelector : '.col-md-3'
   });
});

Answer 1

在您的代码中，display:none;将使所有.blocks类不可见。如果您正在与另一组块进行串联操作，则可能是您在寻找错误的组。您的.blocks类的其他一些CSS属性没有做任何有用的事情，除非这是来自较大项目的摘录。

尽管在模板中使用了该类，但我还在演示中看到了.row类的一些自定义CSS，您没有在此处包括这些CSS。 background-clip: content-box;属性可防止块重叠。

.row [class*='col-'] {
  background-color: #cceeee;
  background-clip: content-box;
  min-height: 200px;
  margin-bottom: 24px;
}

否则，您提供的代码将为我正确呈现。

使用Masonry jQuery内联的不同高度列无法正常工作

1 个答案: