Question

在我的本地服务器中，产品框填充页面的整个宽度，因为它们设置为100％的完整值。边界很好看......

但是在我的现场测试网站上，它没有填满100％而且在最右边留下了一个空白。以及产品之间的边界消失...... 似乎悬停效果位于正确的宽度，因为它在产品图像的右侧溢出。（附图）

现场网站：http://pagedev.co.uk/hoppings/products/

这是每个产品包装盒的CSS：

.grid-wrapper {
    width:100%;
    height:auto;
    margin:0px auto;
}

.grid-wrapper img{
    width:99.8%;
    height:auto;
}

.grid-item {
    width:20%;
    margin-right:-6px;
    margin-bottom:0px;
    display:inline-block;
    vertical-align:top;
    border:1px solid #cfd0d1;
    border-top:0px solid #cfd0d1;   
    background-color:#ffffff;

    @media #{$l-desktop} {
        width:25%;
        margin-right:-6px;
    }

    @media #{$desktop} {
        width:33.2%;
        margin-right:-5px;
    }

    @media #{$mobile} {
        width:50%;
        margin-right:-5px;
    }
}



.image-hovers {
    width:100%;
    height:auto;
    position:relative;
}

.product-hover{
    position:absolute;
    visibility: hidden;
    opacity: 0;
    width:100%;
    height:100%;
    top:0px;
    margin:0 auto; left:0px;
    z-index:100;


    background-image: url("../images/plus.svg");
    background-repeat:no-repeat;
    background-position:center;
    background-position:fixed;
    background-size:55px 55px;
    background-color:$red;

    @include transition(0.5s);
}

Answer 1

我猜你的服务器（或构建过程）正在缩小HTML（可能使用PageSpeed或类似模块），从而消除了CSS所依赖的框之间的空格。您似乎使用负边距来解决空间问题，但真正的解决方案是：从HTML中删除空格，然后您还可以从CSS中删除负边距。

Answer 2

删除margin-right并将box-sizing设置为border-box：

.grid-wrapper {
  width:100%;
  height:auto;
  margin:0px auto;
}

.grid-wrapper img {
  width:99.8%;
  height:auto;
}

.grid-item {
  box-sizing: border-box;
  width:20%;
  /*margin-right:-6px;*/
  margin-bottom:0px;
  display:inline-block;
  vertical-align:top;
  border:1px solid #cfd0d1;
  border-top:0px solid #cfd0d1;   
  background-color:#ffffff;

  @media #{$l-desktop} {
    width:25%;
    /*margin-right:-6px;*/
  }

  @media #{$desktop} {
    width:33.3333%; /*33.2 will leave space on the right.*/
    /*margin-right:-5px;*/
  }

  @media #{$mobile} {
    width:50%;
    /*margin-right:-5px;*/
  }
}

Answer 3

试试这个.grid-item{box-sizing: border-box; margin-right: 0;}

   @media (max-width: 1400px) {
.grid-item {margin-right:0;}
}  /* put margin-right 0 here */

Answer 4

我还不能发表评论。这不是一个快速修复的答案试试

.grid-wrapper {
   width: 101%;
}

CSS的间距问题

4 个答案: