Question

我有以下问题：我希望在同一行中有三个图像，两者之间没有边距。问题是当使用 display：inline 或 display：inline-block 时，会在图像之间生成垂直和水平白色空格。

div img{
    width: 33.3333%;
    display: inline-block;
}

您可以看到问题in the demo。

我知道浮动：左边我可以解决问题，但我想避免这个，因为除非非常必要，否则我不想使用它。

谢谢！

Answer 1

如果您不想使用float：left，可以使用HTML注释块清除图像标记之间的空格。

Working example.

CSS：

div img {
  width: 33.3333%;
  display: inline-block;
}

HTML：

<div>
  <img src="http://imagenesdereligion.com/wp-content/uploads/2014/10/imagenes-de-santa-claus-santa_cla.jpg"><!--
  --><img src="http://www.conhijos.es/wp-content/uploads/2010/10/RatonPerez.jpg"><!--
  --><img src="http://hazteconellos.com/wp-content/uploads/2013/12/reyesmagos-1.jpg">
</div>

Answer 2

使用Flexbox的解决方案

您可以使用display: flex将父div设置为具有灵活布局。它也会移除空白区域。

div {
  display: flex;
  align-items: flex-end;
}
div img {
  width: 33.3333%;
  display: inline-block;
}

<div>
  <img src="http://imagenesdereligion.com/wp-content/uploads/2014/10/imagenes-de-santa-claus-santa_cla.jpg" />
  <img src="http://www.conhijos.es/wp-content/uploads/2010/10/RatonPerez.jpg" />
  <img src="http://hazteconellos.com/wp-content/uploads/2013/12/reyesmagos-1.jpg" />
</div>

使用margin-right

的解决方案

div img {
  display: inline-block;
  margin-right: -0.33em;
  width: 33.3333%;
}

<div>
  <img src="http://imagenesdereligion.com/wp-content/uploads/2014/10/imagenes-de-santa-claus-santa_cla.jpg" />
  <img src="http://www.conhijos.es/wp-content/uploads/2010/10/RatonPerez.jpg" />
  <img src="http://hazteconellos.com/wp-content/uploads/2013/12/reyesmagos-1.jpg" />
</div>

自动生成的边距显示为内联

2 个答案: