包裝/砌體網格全寬

試圖讓我的圖像庫跨越整個頁面。包裝/砌體網格全寬

這裏有一個photo that show's white space at the right of the gallery

是否有可能有廚房完全覆蓋所有空白屏幕上，不包括頁腳。

這裏的HTML：

  <div id="content" class="grid"> 

    <div class="grid-item"> 
     <img src="Gallery/TA-KU-19.jpg" alt="" /> 
    </div> 

    <div class="grid-item"> 
     <img src="Gallery/BBNG-8.jpg" alt="" /> 
    </div> 

    <div class="grid-item"> 
     <img src="Gallery/BBNG-13.jpg" alt="" /> 
    </div> 

    <div class="grid-item"> 
     <img src="Gallery/BBNG-16.jpg" alt="" /> 
    </div> 

    <div class="grid-item featured"> 
     <img src="Gallery/deathgrips-9.jpg" alt="" /> 
    </div> 

    <div class="grid-item"> 
     <img src="Gallery/BBNG-20.jpg" alt="" /> 
    </div> 

    <div class="grid-item"> 
     <img src="Gallery/death grips-18.jpg" alt="" /> 
    </div> 

    <div class="grid-item"> 
     <img src="Gallery/BBNG-17.jpg" alt="" /> 
    </div> 

    <div class="grid-item"> 
     <img src="Gallery/deathgrips-17.jpg" alt="" /> 
    </div> 

    <div class="grid-item"> 
     <img src="Gallery/deathgrips-20.jpg" alt="" /> 
    </div> 

    <div class="grid-item"> 
     <img src="Gallery/TA-KU-11.jpg" alt="" /> 
    </div> 

    <div class="grid-item"> 
     <img src="Gallery/TA-KU-23.jpg" alt="" /> 
    </div> 

    <div class="grid-item"> 
     <img src="Gallery/BBNG-11.jpg" alt="" /> 
    </div> 
    </div>

這裏的CSS：

  #content { 
     /*width: 980px;*/ 
     /*width: 95%;*/ 
     width: 100%; 
     margin-bottom: 0px; 
     padding-bottom: 0px; 
     z-index: -99999; 
     position: relative; 
     /*right: -15px;*/ 
     overflow: hidden; 
     } 
     .grid-item { 
     display: inline-block; 
     width: 450px; 
     -webkit-transition: left .4s ease-in-out, top .4s ease-in-out .4s; 
     -moz-transition: left .4s ease-in-out, top .4s ease-in-out .4s; 
     -ms-transition: left .4s ease-in-out, top .4s ease-in-out .4s; 
     -o-transition: left .4s ease-in-out, top .4s ease-in-out .4s; 
     transition: left .4s ease-in-out, top .4s ease-in-out .4s; 
     margin-bottom: 0; 
     } 
     .featured { 
     width: px; 
     } 
     .grid-item img { 
     display: block; 
     width: 100%; 
     } 
     .featured img { 
     width: 100%; 
     }

最後Jquery的：

  $('.grid').packery({ 
     // options 
     itemSelector: '.grid-item', 
     gutter: 0, 

     }); 

     $('.grid').packery({ 
     percentPosition: true 
     })

來源

2017-03-01 Benjamin Gibbs710

嘗試添加屬性'邊距：汽車;'在您的＃內容的CSS –

是的，我試過之前，沒有什麼改變。 –

你可以試試我的答案如下 –

在你的CSS取代這個

 #content { 
    /*width: 980px;*/ 
    /*width: 95%;*/ 
    width: 100%; 
    margin-bottom: 0px; 
    padding-bottom: 0px; 
    z-index: -99999; 
    position: relative; 
    /*right: -15px;*/ 
    overflow: hidden; 
    }

本

#content { 
    text-align: center; 
    width: 100%; 
    margin-bottom: 0px; 
    padding-bottom: 0px; 
    z-index: -99999; 
    position: relative; 
    /*right: -15px;*/ 
    overflow: hidden; 
}

來源

2017-03-01 13:01:04

沒有工作，但嘗試的歡呼聲。這與網格項寬度有關。我尋找其他類似的問題，但找不到任何！ –

我已經把電網項目寬度，這似乎已經奏效，現在33.3％。儘管圍繞網格元素還有一條細線？

來源

2017-03-01 17:53:19

包裝/砌體網格全寬

回答

相關問題