Question

如何制作一个clearfix来清除包装内的内联块div之间的空格？

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
<div>

在父元素上应用font-size: 0;适用于桌面浏览器，但不适用于iOS Safari。

在每个孩子之间使用评论非常有效，但在DOM中看起来不太好。

所以我认为一个clearfix会在这里使用它，但是我无法让它工作，因为::after在孩子们之后没有应用，它被困在div中。

.child:after {
    content: "";
    display: table;
    clear: both;
}

有没有办法删除适用于iPhone和桌面浏览器的内联块之间的不需要的边距？

Answer 1

我正在尝试重新创建＆＃34;不需要的边距＆＃34;你在谈论。

在我的手机和桌面上看这个小提琴时，我看不到任何异常。

<强> HTML

<div class="parent">
   <div class="child"></div>
   <div class="child"></div>
<div>

<强> CSS

.parent:after{
    content: "";
    display: block;
    clear: both;
}
.child{
  display: inline-block;
  float: left;
  background:coral;
  width: 50%;
  height: 100px;
}
.child+.child{
  background: aquamarine;
}

小提琴：https://jsfiddle.net/Sprazer/dLhmyqrL/

Answer 2

有没有办法删除适用于iPhone和桌面浏览器的内联块之间的不需要的边距？

我使用以下方法删除不需要的边距：

.child {
  display: inline-block;
  margin-right: -.25em;
}

您不需要浮动或clearfix。有关详情，请访问https://css-tricks.com/fighting-the-space-between-inline-block-elements/

适用于iPhone的Clearfix

2 个答案: