[分享]css两个图片一行显示不出来

在前端开发中，我们经常会遇到需要将两个图片一行显示的情况。这时我们会用到 CSS 来实现。然而，有时候我们会发现两个图片无法在同一行显示，这是为什么呢？/ CSS 代码 / img { display...

在前端开发中，我们经常会遇到需要将两个图片一行显示的情况。这时我们会用到 CSS 来实现。然而，有时候我们会发现两个图片无法在同一行显示，这是为什么呢？

/* CSS 代码 */ 
img {
  display: inline-block;
  width: 50%; /* 或者其他宽度 */
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

以上是我们通常用来将两个图片并排显示的 CSS 代码。其中，我们使用了 display: inline-block;，让两个图片水平排列，并且使用了 width 来指定图片宽度。

如果你将上述 CSS 应用到两个图片中，可能会发现图片并没有像预期一样显示在同一行。这是因为图片之间会有默认的间距，这也是为什么有时候，即使我们给图片设置了相同的宽度，它们仍然显示在不同的行。

要解决这个问题，我们需要在 CSS 中添加以下属性：

/* CSS 代码 */ 
img {
  display: inline-block;
  width: 50%; /* 或者其他宽度 */
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  vertical-align: top; 
}

在上面的代码中，我们添加了 vertical-align: top;，使得图片对齐位置为顶部。这样，两个图片就可以很好地在同一行显示了。

总之，两个图片一行显示不出来时，我们需要注意图片间的默认间距，以及使用 vertical-align: top; 来使得图片顶部对齐。这些方法可以帮助你快速解决这个问题。