html双行图片左右划动的代码

HTML双列图片左右划动是一种常见的网页设计效果。使用CSS的float属性和overflow属性，可以实现左侧和右侧各放一张图片，并在一定宽度范围内左右划动。以下是实现这个效果的HTML和CSS代码。

<div class="image-container">
  <div class="left-image">
    <img src="left-image.jpg">
  </div>
  <div class="right-image">
    <img src="right-image.jpg">
  </div>
</div>

以上是HTML代码，其中包含一个class为image-container的div，该div包含左侧和右侧图片的两个div，分别为class为left-image和class为right-image。接下来是CSS代码。

.image-container {
  width: 80%;
  margin: 0 auto;
  white-space: Nowrap;
  overflow-x: scroll;
}

.left-image,.right-image {
  width: 50%;
  display: inline-block;
  float: left;
  height: 500px;
}

.left-image img,.right-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

以上是CSS代码，其中image-container的宽度为80%，居中显示，white-space: Nowrap和overflow-x: scroll属性实现了横向滚动。left-image和right-image设置了宽度为50%，并使用float: left和display: inline-block属性排列在一行。最后，左右图片的img标签设置了最大宽度和高度为100%，并使用object-fit属性保持原图比例。