我正在努力创造"漂浮"使用内联块的列(因为我厌倦了使用clearfix左移)。在我读到的任何地方,使用内联块去除空白区域的方法是使用word-spacing : -4px
或-4px的负边距。但是,对我来说-4px并没有解决问题。那是为什么?
在100%浏览器缩放时查看Chrome中可见的微小空白区域:
以110%缩放查看随机空间
我的HTML是:
<div class="row">
<div class="col1">col 1</div>
<div class="col1">col 1</div>
<div class="col1">col 1</div>
<div class="col1">col 1</div>
<div class="col1">col 1</div>
<div class="col1">col 1</div>
</div>
CSS:
.content-wrap {word-spacing : -4px;}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col13, .col14, .col15, .col16, .col17, .col18 {
display: inline-block;
vertical-align: top;
background-color:#eee;
padding:0;
margin:0;
}
.col9 {width: 50%;}
已编辑:可能的解决方案: -5px修复,但我不确定会引入哪些新问题。
答案 0 :(得分:7)
内联块:内联块元素周围的空格变为 相关的,它的行为就像文字一样。
我建议三种解决方案来解决这个问题(可能还有更多):
1)使用float: left
代替display: inline-block
.content-wrap {
word-spacing: -4px;
}
.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col7,
.col8,
.col9,
.col10,
.col11,
.col12,
.col13,
.col14,
.col15,
.col16,
.col17,
.col18 {
display: inline-block;
vertical-align: top;
background-color: #eee;
padding: 0;
margin: 0;
font-size: 16px;
}
.col9 {
width: 50%;
}
.row{
font-size: 0;
}
<div class="row">
<div class="col1">col 1</div>
<div class="col1">col 1</div>
<div class="col1">col 1</div>
<div class="col1">col 1</div>
<div class="col1">col 1</div>
<div class="col1">col 1</div>
</div>
2)使用font-size: 0
解决父母和孩子的愿望:
.content-wrap {
word-spacing: -4px;
}
.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col7,
.col8,
.col9,
.col10,
.col11,
.col12,
.col13,
.col14,
.col15,
.col16,
.col17,
.col18 {
display: inline-block;
vertical-align: top;
background-color: #eee;
padding: 0;
margin: 0;
font-size: 16px;
}
.col9 {
width: 50%;
}
.row{
font-size: 0;
}
<div class="row">
<div class="col1">col 1</div>
<div class="col1">col 1</div>
<div class="col1">col 1</div>
<div class="col1">col 1</div>
<div class="col1">col 1</div>
<div class="col1">col 1</div>
</div>
3)使用flex
的解决方案:
.content-wrap {
word-spacing: -4px;
}
.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col7,
.col8,
.col9,
.col10,
.col11,
.col12,
.col13,
.col14,
.col15,
.col16,
.col17,
.col18 {
display: inline-block;
vertical-align: top;
background-color: #eee;
padding: 0;
margin: 0;
}
.col9 {
width: 50%;
}
.row {
display: flex;
<div class="row">
<div class="col1">col 1</div>
<div class="col1">col 1</div>
<div class="col1">col 1</div>
<div class="col1">col 1</div>
<div class="col1">col 1</div>
<div class="col1">col 1</div>
</div>
答案 1 :(得分:2)
只需使用浮点数,你也可以清理你的css并选择所有以'col'开头的列,就像这样。
div[class^='col'],div[class*='col']{
float: left;
vertical-align: top;
background-color: #eee;
padding:0;
margin:0;
}