删除浮动元素的边距

【问题标题】：Remove margin on floated elements删除浮动元素的边距
【发布时间】：2015-10-18 08:27:08
【问题描述】：

我在一个简单的网格系统中工作，现在我遇到了浮动列的问题。我使用 12 列网格，我的所有列都有一个左边距，我用这个选择器设置：[class*='column'] + [class*='column'] { margin-left: 1.6%; }。问题是不适合同一行的列被向下移动但仍保留边距，正如您在 this fiddle 中看到的那样。

在这个例子中，我有一个网格定义了三个四列宽的 div、一个六列宽的 div 和一个八列宽的 div。由于最后两个不合适，因此它们被移位但未对齐，因为它们有边距。在这种情况下我该怎么做才能去除边距？

【问题讨论】：

Flexbox 是你的朋友。

标签： html css grid-layout

【解决方案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>

【讨论】：

感谢您的回答，但不幸的是，这不是一个选择，因为我想对任何组合都这样做。这是一个网格系统。