刪除浮動元素上的邊距

Question

我正在一個簡單的網格系統中工作，現在我正面臨浮動列的問題。我使用12列網格，我所有的列都有一個左邊距，我用這個選擇器設置：[class*='column'] + [class*='column'] { margin-left: 1.6%; }。問題是，不符合同一行的列向下移動，但仍保留邊距，正如您在this fiddle中看到的那樣。

在這個例子中，我有一個網格定義三個四列寬div，一個六列寬div和八列寬div。由於他們最後兩個不適合，他們流離失所，但沒有保持一致。在這種情況下我能做些什麼來消除邊距？

Answer 1

[class*='col-'] { 
    height: 20px; 
    position: relative; 
    float: left; 
} 
[class*='col-'] +[class*='col-'] { 
    margin-left: 1.6%; 
} 
.row, [class*='col-'] { 
    box-sizing: border-box; 
} 
.row:before, .row:after { 
    content:" "; 
    display: table; 
} 
.row:after { 
    clear: both; 
} 
.col-4 { 
    background-color: red; 
    width: 32.2666666667%; 
} 
.col-6 { 
    background-color: green; 
    width: 49.2%; 
} 
.col-8 { 
    background-color: red; 
    width: 66.1333%; 
} 
#d6{ 
    margin:0%; 
} 
#d8{ 
    margin:0%; 
} 



and then your html: 


<div class="row"> 
    <div class="col-4"></div> 
    <div class="col-4"></div> 
    <div class="col-4"></div> 
    <div id="d6" class="col-6"></div> 
    <div id="d8" class="col-8"></div> 
</div>