Question

我想弄清楚为什么在OwlCarousel中运行的这个投资组合网格库的每个行部分的底部有一个奇怪的间隙/边距，见http://www.samnorris.net/pfwip2/index.html的示例

我已经把我的头发拉出来试图调试开发人员工具中的问题，并彻底查看了相关的CSS，但却无法弄清楚导致这种不必要的填充/边距的原因。非常感谢任何人都可以提供帮助我解决这个问题的任何帮助。：）

我相信我与#work .item .rollover有关，但我不确定到底是什么......

以下是所有相关的（据我所知）代码：

＆＃13;

foreach

＆＃13;

	///////////////////////////////////////////////////////////////////////////
	// Work slider
	///////////////////////////////////////////////////////////////////////////

	var $workslider = $("#workslider");

	if($workslider.length){
		$workslider.owlCarousel({
			loop : true,
			autoplay: true,
			autoplayTimeout: 4000,
			nav : false,
			dots : false,
			items : 11,
			transitionStyle : "fade"
		});
	}

＆＃13;

/* ==========================================================================

  WORK

========================================================================== */

#work.paddingstandard {
  padding-bottom: 0px !important;
}


/* ---- isotope grid---- */

#portfoliogrid .item {
  width: 20%;
  float: left;
  cursor: pointer;
  overflow: hidden;
  padding-bottom: 0px !important;
}

#portfoliogrid .item.width2 {
  width: 40%;

}

#portfoliogrid img {
  width: 100%
}

/* Item rollover */

#work .item .rollover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 15px;
  text-align: center;
}

#work .item .rollover:before {
  content: "";
  position: absolute;
  height: 50%;
  width: 50%;
  left: 25%;
  top: 26%;
  opacity: 0;
  margin-top: 40px;
  transition: all 0.3s 0.5s, opacity 0.3s 0.8s, margin-top 0.3s 0.8s;
  transform: rotateZ(-45deg);
  -webkit-transition: all 0.3s 0.5s, opacity 0.3s 0.8s, margin-top 0.3s 0.8s;
  -webkit-transform: rotateZ(-45deg);

}

#work .item.width2 .rollover:before {
  width: 25%;
  left: 38%;

}

#work .item .rollover .centerContainer {
  opacity: 0;
  height: 100%;
  transition: all 0.3s 0.1s;
  transform: rotateZ(-5deg);
  -webkit-transition: all 0.3s 0.1s;
  -webkit-transform: rotateZ(-5deg);

}

#work .item .rollover .centerContainer a {

  font-family: "Montserrat";
  font-size: 1.250rem;
  font-weight: bold;
  letter-spacing: -2px;
  color: #FFFFFF;
  display: block;
  text-transform: uppercase;
  text-decoration: none !important;

}

#work .item .rollover .centerContainer .title {
  font-size: 2.8rem;
  line-height: 2.8rem;
  margin-bottom: 15px;
}

#work .item:hover .rollover:before,
#work .portfolioActive .rollover:before {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  opacity: 1;
  margin-top: 0px;
  transition: all 0.3s 0.4s, opacity 0.2s 0.1s, margin-top 0.3s 0.1s;
  transform: rotateZ(0deg);
  -webkit-transition: all 0.3s 0.4s, opacity 0.2s 0.1s, margin-top 0.3s 0.1s;
  -webkit-transform: rotateZ(0deg);

}

#work .item:hover .centerContainer,
#work .portfolioActive .centerContainer {
  opacity: 1;
  transition: all 0.3s 0.6s;
  transform: rotateZ(0deg);
  -webkit-transition: all 0.3s 0.6s;
  -webkit-transform: rotateZ(0deg);

}

/* WORK OPEN ANIMATION */

@keyframes turn {
  0% {
    transform: rotate(45deg);
  }

  15% {
    transform: rotate(135deg);
  }

  25% {
    transform: rotate(135deg);
  }

  40% {
    transform: rotate(225deg);
  }

  50% {
    transform: rotate(225deg);
  }

  65% {
    transform: rotate(315deg);
  }

  75% {
    transform: rotate(315deg);
  }

  90% {
    transform: rotate(405deg);
  }

  100% {
    transform: rotate(405deg);
  }

}

#workLoader {
  position: absolute;
  z-index: 10000;
  -webkit-transition: all 0.8s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

}

#workLoader .iconloader {
  position: relative;
  z-index: 20;
  display: block;
  margin: 0 auto;
  width: 30px;
  height: 100%;
  width: 100%;

}

#workLoader .iconloader:after {
  content: "";
  width: 50%;
  height: 50%;
  position: absolute;
  top: 25%;
  left: 25%;
  border: 4px solid #FFFFFF;
  transform: rotateZ(45deg);
  animation: turn 4s cubic-bezier(0.86, 0, 0.07, 1) infinite;
  -webkit-transform: rotateZ(45deg);
  -webkit-animation: turn 4s cubic-bezier(0.86, 0, 0.07, 1) infinite;
  -ms-transform: rotate(45deg);

}

#workLoader.width2 .iconloader:after {
  width: 25%;
  left: 38%;
}

#workLoader .front, #workLoader .back {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

}

#workLoader .front {
  text-align: center;
}

#workLoader .front img {
  width: 100%;
  opacity: 0.2;

}

#workLoader .back {
  background-color: rgba(20, 20, 20, .95);
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);

}

#workLoader .back #wrkclosebtn {
  position: fixed;
  top: 10px;
  right: 20px;

}

#workLoader .back .fa-times {
  font-size: 2rem;
  cursor: pointer;
  color: #5f5f5f

}

#workLoader .back .fa-times:hover {
  color: #FFFFFF
}

.scale100 {
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  transform: perspective(1000px) rotateX(-180deg);
  -webkit-transform: perspective(1000px) rotateX(-180deg);

}

#workdetailcontainer.darkBackground {
  padding-top: 40px;
}

/* FIX IE 9/10/11 */

.IE #workLoader {
  transition: all .8s !important;
  transform: none;
}

.IE #workLoader .front, .IE #workLoader .back {
  transition: all .8s !important;
}

.IE #workLoader .back {
  transform: perspective(1000px) rotateX(180deg) !important;
}

.IE #wrkclosebtn {
  display: none;
}

.IE .scale100 #wrkclosebtn {
  display: inline;
}

.IE .scale100 {
  transition: none !important;
  transform: rotateX(0deg) !important;
}

.IE #workLoader.scale100 .back {
  transform: perspective(1000px) rotateX(0deg) !important;
  z-index: 10;

}

.IE #workLoader.scale100 .front {
  transform: perspective(1000px) rotateX(-180deg) !important;
}

.IE9 #workLoader {
  background-color: green;
  opacity: 0;
}

/* ==========================================================================

  WORK DETAILS

========================================================================== */

#workdetail {
  padding: 40px 0;
}

#workdetail h1 {
  color: #FFFFFF;
  line-height: 4rem;
  margin-bottom: 35px;
  margin-top: 0px;
  font-size: 4rem;
  text-align: left;
}

#workdetail #detailImg img {
  width: 100%;
}

#workdetail .workDouble #detailImg {
  margin-bottom: 35px;
}

#workdetail p, #workdetail #details span {
  color: #FFFFFF;
}

#workdetail #details {
  margin-bottom: 35px;
  font-size: 0.9rem;
}

#workdetail #details span {
  font-family: 'Montserrat';
}

#workdetail #details li {
  color: #CCC;
  margin-bottom: 5px;
}

#workdetail .button.tint:hover {
  color: #141414;
  background-color: #FFFFFF;
}


/* ==========================================================================

  ISOTOPE FILTERS GENERAL

========================================================================== */

.isotopeFilter {
  margin-bottom: 30px;
}

.isotopeFilter a {
  font-size: 1.250rem;
}

.isotopeFilter .is-checked {
  color: red;
}

＆＃13;

Answer 1

该空格是由html代码中的空白区域引起的。您可以通过应用...

删除它

display:block;

......或......

float:left;
height: auto;

#portfoliogrid img上的

至style.css:4218声明我个人更喜欢第二种解决方案。

作为旁注，您应该快速查看控制台。名为glitch的库/插件似乎输出了一些错误。我已经在Chrome和Firefox中进行了测试。

Answer 2

所有类.item的DIV都是绝对定位的，并且有一个固定的top位置会导致此偏移。

但所有这些样式都是 inline - 在他们的DIV标签内。显然（因为它的响应）这些设置是由脚本动态分配的。在较小的宽度下它可以工作，但在大屏幕上，脚本中存在一个缺陷，导致这些像素偏移。（即看起来那个剧本中有一个小错误）

OwlCarousel网格图库中的神秘间隙/填充

2 个答案: