html - 移除 float 元素的边距

标签 html css grid-layout

我在一个简单的网格系统中工作,现在我正面临 float 列的问题。我使用一个 12 列的网格,我所有的列都有我用这个选择器设置的左边距:[class*='column'] + [class*='column'] { margin-left: 1.6%; }。问题是不适契约(Contract)一行的列被向下移动但仍保留边距,如您在 this fiddle 中所见。 .

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

最佳答案

[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>

关于html - 移除 float 元素的边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33192901/

相关文章:

php - 跨域登录POST——陷阱

php - 如何替换整个字符串,包括 html 标签?

html - CSS 自定义光标在 FF/Chrome 中不起作用

css - 背景图像被截断

swt - SWT GridLayout 中的horizo​​ntalSpan 不跨越

javascript - 每个 HTML 元素都指定一个 id 和/或 class 属性有意义吗?

html - 如何更好地控制响应图像断点和与 BS3 对齐

html - 使 ID 响应

html - 带图像的网格布局

html - 五列网格未正确缩小