Как разместить два изображения рядом друг с другом - PullRequest
Новая
       81

Как разместить два изображения рядом друг с другом

0 голосов
/ 17 марта 2020

Как я могу расположить два изображения рядом друг с другом, а затем добавить <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>

1 Ответ

0 голосов
/ 17 марта 2020

Вы можете использовать flexbox.

Flexbox - отличный способ размещения элементов в строке или столбце. Все предметы внутри флексбокса расположены рядом друг с другом в одном направлении. Направление по умолчанию - строка, но вы можете использовать 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>
...