CSS的间距问题

时间:2016-08-17 08:36:03

标签: html css

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

enter image description here

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

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

enter image description here

这是每个产品包装盒的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);
}

4 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:0)

删除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;*/
  }
}

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

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

.grid-wrapper {
   width: 101%;
}