css两张图片在同一行

CSS可以很方便地把两张图片放在同一行，只需通过以下代码即可实现：

img {
  display: inline-block;
  width: 50%;
}

其中，display: inline-block;会将图片变成行内块元素，从而实现同行显示；width: 50%;会将图片占据父元素的一半宽度，从而使两张图片分别占据一半宽度。

这种方法也适用于其他行内块元素的排列，比如按钮、图标等。

下面是一个例子：

<div>
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
</div>

如上代码所示，通过将两张图片包裹在同一个

元素中，即可实现同行显示。

如果想要更加灵活地控制每张图片的样式，也可以为每张图片添加单独的CSS样式，例如：

img.first {
  display: inline-block;
  width: 40%;
  border: 1px solid #000;
}
img.second {
  display: inline-block;
  width: 50%;
  border: 1px solid #ccc;
  margin-left: 5%;
}

如上代码所示，通过为每张图片添加不同的类名，并分别设置不同的样式，即可实现个性化的图片排列。

最终效果如下图：