图片布局新风尚：CSS轻松实现图片并排排列技巧解析

一、基础并排排列

1.1 使用display: inline-block;

.image-container {
  display: inline-block;
  width: 100px; /* 根据图片尺寸调整 */
  margin-right: 10px; /* 图片间距 */
}

HTML代码：

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

1.2 使用flexbox

.image-container {
  display: flex;
  justify-content: space-between;
}

HTML代码：

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

二、响应式并排排列

.image-container {
  display: flex;
  justify-content: space-between;
}

@media (max-width: 600px) {
  .image-container {
    flex-direction: column;
  }
}

三、图片自适应

.image-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

四、总结