jquery - 包装/masonry 网格全宽

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