Question

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

这里是photo that show's white space at the right of the gallery

是否可以让厨房完全覆盖屏幕上的所有空白区域，不包括页脚。

这是HTML：

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { Location } from '@angular/common';

@Component({
    selector: 'page-not-found',
    templateUrl: './app/error/page-not-found/page-not-found.component.html'
})
export class PageNotFoundComponent implements OnInit {
    constructor(private titleService: Title,
        private location: Location) { }

    ngOnInit() {
        this.titleService.setTitle('Page Not Found');
    }

    back() {
        //check if history is empty somehow and execute 'this.router.navigate["/"];'
        this.location.back();
    }
}

这里是CSS：

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

最后是Jquery：

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

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％，这似乎现在已经有效了。尽管如此，网格元素周围仍然有一条细线？

小包/砌体网格全宽

2 个答案: