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>

移除浮动元素的边距

1 个答案: