CSS的間距問題

在本地服務器中，產品框填充頁面的整個寬度，因爲它們被設置爲100％的完整值。和邊框都出現很好..CSS的間距問題

但在我的實際測試的網站它不是填充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); 
}

來源

2016-08-17 lbollu

刪除負面右頁邊距 – Sevanteri

@Sevanteri去除切緣陰性使得最後一個項目下移低於其餘 – lbollu

@lbollu變化'border'到'outline'或刪除邊框。 – Sevanteri

我猜你的服務器（或建造過程）是涅槃的HTML（可能使用PageSpeed或類似的模塊），從而消除了箱之間的空間，你的CSS依賴。您似乎使用負邊距來解決空間問題，但真正的解決方案是：從HTML中刪除空格，然後您也可以從CSS中刪除負邊距。

來源

2016-08-17 08:46:06 mik01aj

謝謝！這是問題。我將確保去除我的利潤。 – lbollu

取出margin-right並設置box-sizingborder-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;*/ 
    } 
}

來源

2016-08-17 08:43:55

這樣做不允許項目在同一行上。它敲下來..我認爲每個項目的邊框添加到寬度 – lbollu

添加'框大小：邊框 - 應該解決這個問題。 –

試試這個.grid-item{box-sizing: border-box; margin-right: 0;}

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

來源

2016-08-17 08:50:26

我還不能發表評論。這不是一個答案只是一個權宜之計嘗試

.grid-wrapper { 
    width: 101%; 
}

來源

2016-08-17 08:51:36

CSS的間距問題

回答

相關問題