[分享]css两张图片两端对齐

CSS图片两端对齐是一种常用布局方式，可以使页面看起来更加美观和整洁。本文将介绍如何使用CSS实现两张图片两端对齐的布局。首先，我们需要使用HTML将两张图片放置在同一个父元素内： 接下来，我们...

CSS图片两端对齐是一种常用布局方式，可以使页面看起来更加美观和整洁。本文将介绍如何使用CSS实现两张图片两端对齐的布局。
首先，我们需要使用HTML将两张图片放置在同一个父元素内：

<p>
  <img src="image1.png" alt="Image 1">
  <img src="image2.png" alt="Image 2">
</p> 

接下来，我们需要使用CSS对这个父元素进行样式设置。我们可以使用flex布局来实现图片两端对齐：

pre {
  display: block;
  white-space: pre-wrap;
  font-size: 16px;
  background-color: #f7f7f7;
  padding: 10px;
  border-radius: 5px;
}
p {
  display: flex;
  justify-content: space-between;
}
img {
  max-width: 50%;
  height: auto;
} 

在这个CSS样式中，我们首先设置了pre标签的样式，这样代码可以以可读性更好的方式展现。接下来，我们对p标签进行了样式设置，使用了flex布局，并通过justify-content属性将图片分别靠左和靠右对齐。
最后，我们对每个img标签进行了样式设置，使其最大宽度为50%，使其自适应大小并保持其原有比例。
通过以上CSS样式设置，我们就可以实现两张图片两端对齐的布局了。