javascript - OwlCarousel 网格画廊中的神秘间隙/填充-6ren

javascript - OwlCarousel 网格画廊中的神秘间隙/填充

转载作者：行者123 更新时间：2023-11-28 01:00:10

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

我该死的差点 panic ，已经尝试在开发人员工具中调试问题，并且彻底研究了相关的 CSS，但一直无法弄清楚是什么导致了这种不需要的填充/边距。非常感谢任何人可能提供的任何帮助来帮助我解决这个问题。 :)

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

这是所有相关的(据我所知)代码:

	///////////////////////////////////////////////////////////////////////////
	// Work slider
	///////////////////////////////////////////////////////////////////////////

	var $workslider = $("#workslider");

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

/* ==========================================================================

  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;
}

<!--\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    Work section
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->

<section id="work" class="paddingstandard">
    <div class="container">
        <h2 class="appear" data-animation="translatefrombottom">WORK</h2>
        <!-- Description -->
        <p class="aligncenter appear">Pellentesque erat velit, pretium vitae dui tempor, scelerisque posuere mi. Etiam fringilla scelerisque nulla volutpat vehicula. Donec tempus ut diam ac pharetra. Quisque quis odio convallis, imperdiet purus dignissim, tempor urna. Curabitur ut nisl nec orci scelerisque vehicula vitae eu nunc.</p>


        <!-- Isotope Filter -->
        <nav id="portfolionav" class="isotopeFilter aligncenter appear">
            <a href="#" data-filter-value="*" class="is-checked">ALL</a>
            <a href="#" data-filter-value=".graphic" >GRAPHIC</a>
            <a href="#" data-filter-value=".slider">IMAGE SLIDERS</a>
            <a href="#" data-filter-value=".video">VIDEO</a>
        </nav>
    </div>

    <div id="portfoliogrid">
        <!-- Begin item -->
        <div class="item width2 graphic">
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-1.html">CREATIVITY SPLASH</a>
                        <a href="work-detail-1.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <!-- Item Image -->
            <img src="img/work/work-double-1.jpg" alt="Portfolio" />
        </div>
        <!-- End item -->

        <div class="item manager" >
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-2.html">IRRIGATE YOUR MIND</a>
                        <a href="work-detail-2.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-single-1.jpg" alt="Portfolio" />
        </div>

        <div class="item graphic"  data-url="article.html">
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-3.html">DOMOTIC</a>
                        <a href="work-detail-3.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-single-2.jpg" alt="Portfolio" />
        </div>

        <div class="item developer" >
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-4.html">JOURNEY TO THE LAND OF TEA</a>
                        <a href="work-detail-4.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-single-3.jpg" alt="Portfolio" />
        </div>

        <div class="item graphic" >
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-5.html">FUTURE OF COMMERCE</a>
                        <a href="work-detail-5.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-single-4.jpg" alt="Portfolio" />
        </div>

        <div class="item manager" >
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-6.html">CORPORATE DESIGN</a>
                        <a href="work-detail-6.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-single-5.jpg" alt="Portfolio" />
        </div>

        <div class="item graphic" >
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-7.html">PHOTO STUDIO</a>
                        <a href="work-detail-7.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-single-6.jpg" alt="Portfolio" />
        </div>

        <div class="item width2 slider" >
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-8.html">LOOKING FOR AWESOME IDEAS</a>
                        <a href="work-detail-8.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-double-2.jpg" alt="Portfolio" />
        </div>

        <div class="item developer" >
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-9.html">APP MARKET</a>
                        <a href="work-detail-9.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-single-7.jpg" alt="Portfolio" />
        </div>

        <div class="item developer" >
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-10.html">DATA STORAGE</a>
                        <a href="work-detail-10.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-single-8.jpg" alt="Portfolio" />
        </div>

        <div class="item width2 video">
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-11.html">VIDEO TIMELAPSE</a>
                        <a href="work-detail-11.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-double-3.jpg" alt="Portfolio" />
        </div>

        <div class="item developer" >
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-12.html">CLEAN DESIGN</a>
                        <a href="work-detail-12.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-single-9.jpg" alt="Portfolio" />
        </div>

    </div><!-- end "portfoliogrid"-->
</section>

最佳答案

该空格是由 html 代码中的空格引起的。您可以通过应用...来删除它。

display:block;

……或者……

float:left;
height: auto;

到 #portfoliogrid img 声明，在 style.css:4218 上。
我个人更喜欢第二种解决方案。

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

关于javascript - OwlCarousel 网格画廊中的神秘间隙/填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42520734/

文章推荐： javascript - 打开输入元素列表 onclick

文章推荐： javascript - 单击提交输入时如何防止 Accordion 切换？

文章推荐： javascript - 动态事件源 URL(HTML5 服务器发送的事件)

文章推荐： javascript - CSS 样式因媒体查询而被划掉？

java - MySQLSyntaxErrorException 神秘
我正在尝试更新我的 jtable(更改值并按 Enter 键)，但出现错误。由于大小原因，错误未完整。我认为其余部分只是 c3p0 池连接工具生成的不相关信息。假设起初，我认为这可能是 c3p0
css: 神秘 "margin"
每当我有两个水平并排的元素并指定了右和/或左填充和/或边距时，元素之间通常会在我指定的上方和上方有空格。我希望有人能告诉我如何消除该空间(没有像负边距这样的笨拙东西)。请注意:我并不是在寻找替代的多
java - 神秘(空)字
String[] parts = msg.split(" +\n?"); String room = parts[0]; System.out.println(msg); Sy
php fopen 相对路径损坏 - 神秘
我知道“一定有什么东西被改变了”，但我的代码似乎在一夜之间无缘无故地崩溃了。我的服务器目录结构是这样的: / /scripts /audit /other_things 我在“scripts”文件夹
java - android - classnotfoundException - 神秘
我正在尝试了解 GCM 的工作原理。为此，我复制/粘贴 http://developer.android.com/ 的代码在“实现 GCM 客户端”部分中提出。从服务器发送消息是可行的，但是当我的客
C# 生成随机 int - 神秘
在生成随机整数时，我发现了一些有趣的事情(至少对我而言)，我无法向自己解释，所以我想我会把它贴在这里。我的需求很简单:我要生成随机积分 (Int32) ID 并旨在最大程度地减少冲突。生成时间不是问
arrays - 神秘 IFS 行为
在这里https://stackoverflow.com/a/19915925/4673197我了解到我可以通过设置 IFS 将字符串拆分为数组。在这里https://stackoverflow.c
python - 神秘 key 错误
我现在正在为我的 CS 测试学习，并尝试编写代码，以明文形式给出整个 IMDB 数据库，找到电影中共同点最多的 Actor 。我已经差不多完成了，只是不断遇到一个奇怪的 KeyError。这是我的代码
android - 神秘 Activity 不符合应用主题
在 Android 平台上开发了几个月之后，我仍然有一个悬而未决的问题。很久以前，我注意到我有一个 Activity 不符合应用程序主题的其余部分。这意味着默认情况下，Activity 的字体颜色是白
azure - 神秘？ Azure DaaS 网络作业
本周，我注意到我的团队 Azure 门户上有一个持续的网络作业。团队中没有人表示他们已经部署了它，或者熟悉它。我找到了这个博客: https://azure.microsoft.com/en-ca/
javascript - HTML/JS 脚本中的变量未定义错误，神秘
所以我正在制作一个小型闲置游戏，我的部分努力是格式化所有数字，以便它们之间有逗号(出于美观目的)。我成功地让我的货币 Energy 带有这些逗号，但我很难添加其他变量。我用了num.toLocaleS
c# - 单个项目中的多个 Windows 服务 = 神秘
我遇到了一个我以前从未见过的奇怪问题，我认为它一定是一些我在代码中没有看到的简单问题。我有一个项目，其中定义了 2 个 Windows 服务。一个我称为 DataSyncService，另一个称为
javascript - onClick -> Fiddle 在第一次点击时起作用，但停止工作 - 神秘
我有这个jsfiddle一次有效。 function toggle_off(itemID){ alert(itemID+'->'+document.getElementById(itemID).g
android - 神秘!我的一个 .xml 布局资源未被检测到!这是怎么回事？
更新:已解决，我是白痴，谢谢大家! Okay little bit weird.. I just created a layout file for list items, I can see it
javascript - 神秘 "rnorm"函数地形生成 javascript - 这是做什么的？
问题:这段代码究竟在做什么？另外:“w”的使用方式是否是某种现有算法？我试图弄清楚函数的意图，或者至少描述它产生的数字种类。上下文:我正在查看 Martin O'Leary 的“Fantasy M
C++将 self 传递给 self 神秘
你能帮帮我吗？我正在将自己传递给它自己的纯虚函数。 n->dataCallback(handler, n, hangup); 其中 n 是我的类指针，dataCallback 是它自己的(纯)虚函数(
c# - 神秘 => 管道读取错误 : The pipe has been ended. (109, 0x6d)
我知道这里有数百万篇关于这个异常(exception)的帖子，但我不明白这里的这个。我有一个极端简单的示例管道服务: [ServiceContract] public interface ISRARi
c# - 以下代码如何调用 Equals、GetHashCode 和 Compare？ (神秘)
此代码有效，但它如何不实际调用任何列出的方法。它有效，但它的工作原理和原因似乎几乎是神奇的。我实际上从未调用过 Equals、GetHashCode 或 Compare，但代码有效。我也从不在实现两个
canvas - 神秘 flutter 警告 : Element is implicitly hidden?
警告: Element 'TextStyle' from SDK library 'ui.dart' is implicitly hidden by 'text_style.dart'. 代码摘录:
c# - 神秘 : my custom C# attribute is used once, 但在运行单元测试时构造了无数次。为什么？
我有一个似乎无法解开的谜。我有这个非常简单的单元测试，它使用了一个非常简单的自定义属性。该属性仅添加到甚至未实例化的 1 个类。我计算属性被构建的次数。由于类 MyDummyClass 上的属性，我希

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - OwlCarousel 网格画廊中的神秘间隙/填充