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>

如何将两个图像彼此相邻放置

1 个答案: