我正在使用名为Mix It Up的jQuery Gallery插件,但无法将内容(例如页脚向下)推入其中。
配置该图库的方式是,我设置了许多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个小时试图解决这个问题。有任何想法吗?
最佳答案
容器上的高度固定为500px:
.portfolio-container {
...
height: 500px;
...
}
然后为子元素(网格项目)设置基于百分比的高度:
.portfolio-container div {
...
height: 50%;
...
}
如果您从
.portfolio-container
中删除了固定高度,并为.portfolio-container div
中的250px
添加了固定高度,则Mix It Up插件将自动调整容器的大小,以适应当前显示的元素数。关于javascript - 混合使用Jquery Gallery不将内容推送到下面,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36102137/