[分享]css两种图片并排

CSS是网页设计中的必备技能之一。在网页设计中，有时需要将两张图片进行并排排列以达到更好的视觉效果。常见的方法有两种：/ 第一种方法：float / .img1 { float: left; marg...

CSS是网页设计中的必备技能之一。在网页设计中，有时需要将两张图片进行并排排列以达到更好的视觉效果。常见的方法有两种：

/* 第一种方法：float */

.img1 {
  float: left;
  margin-right: 10px;
}
.img2 {
  float: right;
  margin-left: 10px;
} 

代码中，我们使用了float属性对图片进行浮动。对于第一张图，我们将其浮动至左侧，同时设定其右侧边距为10px。对于第二张图，我们将其浮动至右侧，同时设定其左侧边距为10px。这样两张图片就能够很好地并排排列了。

/* 第二种方法：display */

.container {
  display: flex;
  justify-content: space-between;
}
.img {
  width: 48%;
} 

代码中，我们使用了display属性将父元素的显示方式设为flex，这样子元素就能够进行弹性布局了。同时，我们设定了子元素的宽度为48%（或是根据实际需求进行调整），并使用了justify-content属性将两张图片在父元素中进行水平对齐和间距分布。

以上是两种常见的CSS图片并排方法。在设计网页时，可以根据实际需求进行选择，以达到最优效果。