神祕的差距/填充在OwlCarousel電網館

我想在http://www.samnorris.net/pfwip2/index.html 神祕的差距/填充在OwlCarousel電網館

弄清楚爲什麼會出現在在OwlCarousel運行此組合電網館各行區域的底部，一個奇怪的差距/保證金，見例如

我都差點兒把我的頭髮已經開始嘗試調試開發工具的問題，並已在相關CSS徹底，但一直無法找出是什麼原因造成這種不必要的填充/保證金。真的很感謝任何人可能提供幫助我解決這個問題的幫助。 :)

我相信我會是與#work .item .rollover，但我不知道究竟是什麼....

這裏是所有相關的（據我所知）的代碼：

\t /////////////////////////////////////////////////////////////////////////// 
 
\t // Work slider 
 
\t /////////////////////////////////////////////////////////////////////////// 
 

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

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

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

 
    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>

來源

2017-02-28 FuManchuNZ

這個空間是由白色空間，在你html代碼引起的。您可以通過應用或者刪除它...

display:block;

......或者......

float:left; 
height: auto;

到#portfoliogrid img報關，style.css:4218。
我個人比較喜歡第二種解決方案。

作爲一個側面說明，您應該快速查看您的控制檯。一個名爲glitch的庫/插件似乎輸出了一些錯誤。我已經在Chrome和Firefox上測試過。

來源

2017-03-01 00:05:36

謝謝，這沒有把戲！嗯，差不多.... http://samnorris.net/pfwip2/index.html 現在有隻在第二和底部行之間的非常薄的1px的差距？奇。已經刪除了HTML中的任何空格，所以我不認爲這是.....除非你碰巧有任何想法，否則會嘗試自己弄清楚它？是的，我知道Javascript的錯誤...... :)一個小小的WebGL實驗，仍然是一個正在進行的工作。乾杯。 – FuManchuNZ

幾乎是什麼意思？至少在Chrome中，空間消失了。你能提供詳細信息嗎？ –

哦，你是對的.....它似乎只是在Firefox。嗯，也許不是什麼大不了的事。 – FuManchuNZ

所有與.item類的DIV是絕對定位並具有固定的位置top這將導致此偏移量。

但所有這些款式都是直列 - 他們的DIV標籤內。顯然（因爲它是響應式的）這些設置是由腳本動態分配的。在較小的寬度上工作，但在大屏幕上，腳本中存在缺陷，導致這些像素偏移。（即似乎在該腳本中有一個小錯誤）

來源

2017-03-01 00:09:42 Johannes

神祕的差距/填充在OwlCarousel電網館

回答

相關問題