Question

我正在使用名为Mix It Up的jQuery图库插件，但它无法推送内容，例如我的页脚在其下方。

这个图库的配置方式是我有许多div元素，其背景应用于它们以形成图库。当您最初加载页面时，一切都很好（如果从桌面设备加载）。但是，当您减小页面宽度时，我已更改了库的布局，例如，在全宽处，每行有四个元素，在较低的断点处有两个元素，依此类推。因此，在较低的断点处，图库的高度会发生变化，以适应每行较少的项目。这意味着我的页脚不再被推到画廊下面。

以下是我的图库的HTML：

    <section id="portfolio">
  <div class="portfolio-title h1">
    <h2>My <span>Work</span></h2>
    <hr/>
  </div>
  <div class="gallery-filters">
    <div class="filter" data-filter="all"><img src="asset/Portfolio/loupe.png" alt="View All"/><p>ALL</p></div>
    <div class="filter" data-filter=".category-1"><img src="asset/Portfolio/web.png" alt="Website Design"/><p>WEB</p></div>
    <div class="filter" data-filter=".category-2"><img src="asset/Portfolio/graphic design.png" alt="Graphic Design"/><p>GRAPHIC</p></div>
    <div class="filter" data-filter=".category-3"><img src="asset/Portfolio/picture.png" alt="Content Creation"/><p>CONTENT</p></div>
  </div>
  <div class="portfolio-container">
    <div class="p1 p-content category-1 mix" data-myorder="1"><div></div></div>
    <div class="p2 p-content category-1 mix" data-myorder="3"><div></div></div>
    <div class="p3 p-content category-1 mix" data-myorder="2"><div></div></div>
    <div class="p4 p-content category-1 mix" data-myorder="5"><div></div></div>
    <div class="p5 p-content category-1 mix" data-myorder="4"><div></div></div>
    <div class="p6 p-content category-2 mix" data-myorder="6"><div></div></div>
    <div class="p7 p-content category-3 mix" data-myorder="8"><div></div></div>
    <div class="p9 p-content category-3 mix" data-myorder="7"><div></div></div>
  </div>
</section>

这是我的画廊的CSS：

/*Portfolio Section */
#portfolio{
  width: 100%;
  height: auto;
}
.portfolio-title{
  text-align: center;
  padding-top: 20px;
}
.portfolio-title h2{
  color: black;
  font-weight: 300;
  margin-top: 15px;
}
.portfolio-title hr{
  width: 50px;
  background-color: black;
  height: 3px;
  margin-top: 40px;
  margin-bottom: 40px;
}
.portfolio-container{
  width: 100%;
  height: 500px;
  font-size: 0;
  margin-top: 40px;
}
.portfolio-container div{
  width: 25%;
  height: 50%;
  background-color: #363636;
  display: inline-block;
  vertical-align: top;
  border: 1px solid rgba(0, 0, 0, 0.2);;
  box-sizing: border-box;
}
.filter{
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 360px;
  border: 1px solid black;
  cursor: pointer;
  margin: 10px 20px 10px 20px;
}
.filter p{
  font-size: 13px;
  margin-top: 5px;
}
.filter img{
  width: 40px;
  height: 40px;
  margin-top: 15px;
}
.gallery-filters{
  width: 100%;
  text-align: center;
}
.portfolio-container .mix{
  display: none;
}
.p-content div{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}
.p-content div:hover{
  opacity: 0.7;
}
/*Gallery Images */
.p-content{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.p1{
  background-image: url('asset/Portfolio/web/thewebcreator.png')
}
.p2{
  background-image: url('asset/Portfolio/web/lussoegusto.png')
}
.p3{
  background-image: url('asset/Portfolio/web/akrams.png')
}
.p4{
  background-image: url('asset/Portfolio/web/adaptive-flair.png')
}
.p5{
  background-image: url('asset/Portfolio/web/codeacation.png');
}

我上面包含如此多代码的原因是为了给出适当的上下文。此外。如果您访问网站HERE，则可以使用开发人员工具进一步检查。我确信解决方案很简单。

然而，为了进一步增加复杂性，图库部分的高度也会随着图像的过滤而动态变化，这意味着我基本上需要一种自动设置图库高度的方法。

我花了2个小时试图解决这个问题。有什么想法吗？

Answer 1

容器上有500px的固定高度：

.portfolio-container {
    ...
    height: 500px;
    ...
}

并为子元素（网格项）设置基于百分比的高度：

.portfolio-container div {
    ...
    height: 50%;
    ...
}

如果从<{1}}移除固定高度，将固定高度添加到.portfolio-container的{{1}}，则混合它Up插件会自动调整容器大小以容纳当前显示的元素数量。

混合它Jquery Gallery不推送下面的内容

1 个答案: