我在一个简单的网格系统中工作,现在我正面临 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/