如何将两张图片并排放置

Question

如何将两张图片并排放置，然后添加 <div> 和较小的 width 并使 overflow: hidden？

就像在滑块中一样。我总是得到堆叠图像（块级），但我需要内联。

* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}
 
.slider div {
    background-color: red;
    position:relative;
}
img {
    width: 600px;
    height: 300px;
    position:relative;
    display:inline-block;
}

<div class="slider"><div>
        <img src="https://lh3.googleusercontent.com/proxy/Lg1sxGxpUtviON3zqYv_Pjz_gLMf2YhlOvuFPe1-zfusYQum6pOfMrXRCxR6MfnUoJ7IK2VAihsNxJkL0qhmRVRo1vxTpClk_970lE6gp5XQ" alt="">
        <img src="https://imgcomfort.com/Userfiles/Upload/images/illustration-geiranger.jpg" alt="">
</div>
</div>

Answer 1

你可以使用 flexbox。

Flexbox 是在行或列中排列项目的好方法。 flexbox 中的所有项目都以相同的方向彼此相邻放置。默认方向是行，但您可以在 flex 容器上使用 flex-direction 来改变它。这是完整的指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

哦，当然你需要使用 overflow: auto 如果你想要在框小于内容时滚动行为。

* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}
 
.slider {
  display: flex;
  overflow: auto;
}

img {
  width: 600px;
  height: 300px;
}

<div class="slider">
  <img src="https://lh3.googleusercontent.com/proxy/Lg1sxGxpUtviON3zqYv_Pjz_gLMf2YhlOvuFPe1-zfusYQum6pOfMrXRCxR6MfnUoJ7IK2VAihsNxJkL0qhmRVRo1vxTpClk_970lE6gp5XQ" alt="">
  <img src="https://imgcomfort.com/Userfiles/Upload/images/illustration-geiranger.jpg" alt="">
</div>

如何将两张图片并排放置

How to position two images next to each other

css

image

css-position