删除浮动元素上的边距

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>