包装/砌体网格全宽

Question

试图让我的图片库跨越整个页面。

这是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
      })

Answer 1

在你的 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;
}

Answer 2

我已将网格项宽度设置为 33.3%，这似乎目前可行。但是网格元素周围还有一条细线吗？