[分享]css两张图片水平

在网页中，有时需要将两张图片水平排列，让它们并列显示出来。这里我们可以使用CSS来实现它。首先我们需要创建两张图片： 接下来，我们可以使用CSS的float属性来让这两张图片水平排列。将它们包裹在一...

在网页中，有时需要将两张图片水平排列，让它们并列显示出来。这里我们可以使用CSS来实现它。

首先我们需要创建两张图片：

<img src="image1.jpg" alt="图片1">
<img src="image2.jpg" alt="图片2"> 

接下来，我们可以使用CSS的float属性来让这两张图片水平排列。将它们包裹在一个div容器中，并将float属性设置为left：

<div class="img-container">
  <img src="image1.jpg" alt="图片1" style="float:left">
  <img src="image2.jpg" alt="图片2" style="float:left">
</div> 

然后，在样式表中为.img-container设定一些基本样式，使它们能够水平排列，并且可以在不同屏幕尺寸下响应式展示：

.img-container {
  width: 100%; /* 设置宽度为100%以适应不同的屏幕尺寸 */
  display: inline-block;
}

.img-container img {
  width: 50%; /* 将每个图片的宽度设为50% */
  height: auto; /* 根据比例自适应高度 */
  box-sizing: border-box; /* 确保边框在宽度内计算 */
  padding: 5px; /* 设置图片与容器之间的间距 */
} 

通过这种方式，我们可以在网页中轻松实现两张水平排列的图片。