如何将两张图片并排放置答案

【问题标题】：How to position two images next to each other如何将两张图片并排放置
【发布时间】：2020-03-18 00:23:34
【问题描述】：

如何将两个图像并排放置，然后将<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>

【问题讨论】：

你好 Lyuba，到目前为止你尝试了什么？
对于一般问题。将两个图像放在一起的无尽方法（通过 inline-block.Flexbox.CSS Grid.Table.Floating）。请阅读这篇文章：developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/…。稍后添加更具体的Q。另外请添加您想要的结果的屏幕截图。

标签： css image css-position

【解决方案1】：

你可以使用弹性盒子。

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>

【讨论】：