当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Spacing Issue with CSS

问题描述:

In my local server the product boxes fill the full width of the page as they are set to a complete value of 100%. And the borders are showing nicely..

But on my live test site its not filling 100% and leaving a gap on the far right. aswell as the borders between the products disappearing...

It seems that the hover effect is sitting at the right width as it is overflowing on the right of the product image.(attached image)

Live site here: http://pagedev.co.uk/hoppings/products/

This is the CSS for each product box:

.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);

}

网友答案:

I guess your server (or build process) is minifying the HTML (maybe with PageSpeed or similar module), thus removing spaces between the boxes, which your CSS relied on. You seem to use the negative margin to work around the spaces problem, but the real solution is: remove the spaces from your HTML and then you can also remove the negative margins from your CSS.

网友答案:

Remove the margin-right and set box-sizing to 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;*/
  }
}
网友答案:

Try this .grid-item{box-sizing: border-box; margin-right: 0;}

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

I can't comment yet. This is not an answer just a quick fix try

.grid-wrapper {
   width: 101%;
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: