Как остановить 3 изображения рядом внутри div от переноса на следующую строку?

Question

Я не могу понять это. Я бы хотел, чтобы 3 изображения располагались рядом внутри div шириной 930 пикселей.

так что, когда вы входите в режим адаптивного дизайна или перетаскиваете экранную браузер по ширине, чтобы уменьшить его размер, все 3 изображения остаются рядом внутри div без переноса на следующую строку.

Но автоматически начинайте изменять размер, чтобы соответствовать измененному размеру.

3 изображения начинают правильно изменять размер внутри div, только когда 3-е изображение обернуто под вторым изображением. Так это выглядит ниже.

[]
[] 
[]

Как только все изображения выровнены по вертикали, они начинают правильно уменьшаться. Но это обертывание изображения под следующим изображением мне не подходит, так как при просмотре веб-сайта на мобильном телефоне или при изменении размера экрана изображения по-прежнему очень велики.

Должен быть способ предотвратить наложение этих изображений друг на друга, и просто оставаться в линии, но автоматически изменять их размер как ширина страницы / страницы уменьшается?

Я пробовал пробел: nowrap; дисплей: встроенный; встроенный блок; четное отображение: таблица-ячейка; ничего не кажется делать то, что мне нужно. Тем не менее, если я использую только одно изображение вместо 2 или 3, то оно отлично работает.

Вы, наверное, думаете, почему бы просто не поместить все 3 изображения в 1 изображение в фотошопе? Ну, каждый img - это ссылка href, так что это невозможно. Даже плавание изображений влево все равно не помогает.

Вот мой CSS / HTML

img {

max-width: 100%;
height: auto;

}

затем

<div style="width: 930px; max-width: 100%; border: 1px solid blue;">
<img src="camera.png"> <img src="lights.png"> <img src="action.png">
</div>

Может кто-нибудь сказать мне, где я могу пойти не так, пожалуйста? Как я могу остановить наложение изображений под другими изображениями, когда родительский контейнер сжимается.

Мне приходилось прибегать к использованию нескольких @media-запросов с разными предустановленными размерами изображений на точку останова. Но должен быть намного более легкий путь. Что-то настолько простое, что мне не хватает.

Answer 1

После многих дней тестирования различных способов, вот идеальный способ сделать это без гибкости.Убедитесь, что каждое изображение обернуто в свой собственный div, что важно.

<style>
* {
    box-sizing: border-box;
}

img {

width: 100%;
max-width: 100%;
height: auto;

}

.column {
    float: left;
    width: 33.33%;
    padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
    content: "";
    clear: both;
    display: table;
}

</style>

Теперь, вот где я немного изменил его для большей гибкости.Так как каждое изображение теперь находится в своем собственном div, мы можем сделать изображение width: 100%; или max-width: 100%; , затем добавить width: 33.33%; часть, которая раньше находилась под img {} вместо каждого из трех новых столбцов div.

<div class="row">
  <div class="column"> /* 33.33% width */ 
    <img src="flash-tooltip.png">
  </div>

  <div class="column"> /* 33.33% width */ 
    <img src="html-tooltip.png">
  </div>

  <div class="column"> /* 33.33% width */ 
    <img src="portables-tooltip.png">
  </div>

</div>

Многие люди давали отличный совет.

Самый простой способ - использовать flex.Но то, что люди не говорят вам при использовании flexbox.Вы все равно должны обернуть каждое изображение в свой собственный контейнер div.В противном случае вы получите некоторые странные вещи, когда будете заключать их в якоря гиперссылок, то есть если все три изображения будут просто помещены в первый div контейнера flex.А без их собственных контейнеров Div изображения не будут сохранять какие-либо пропорции при уменьшении / увеличении.Они просто сжимаются и наклоняются вместе.

И, наконец, очень важно!Всегда проверяйте, чтобы все изображения внутри гибкого контейнера были настроены одинаково.Либо ширина: 100%; или максимальная ширина: 100%; в противном случае изображения не будут сжиматься вверх / вниз вообще в Google Chrome.

Я включил тот же метод, что и выше, только на этот раз в версию flexbox.

Answer 2

Мои ответы более или менее являются продолжением Тома, о котором я пишу здесь, поэтому я не переполняю раздел комментариев.

Проблема с max-width: 100% состоит в том, что относительный размер не начинает действовать, пока каждое изображение не перерастет своего родителя, в данном случае, div. Так как все изображения имеют абсолютный размер по умолчанию на основе их src изображения, они перед началом изменения размера переносятся на новую строку и только тогда max-width начнет делать то, что вы хотите. Согласно ответу Тома, размер в 33% заставляет изображения иметь относительный размер, что приводит к их немедленному уменьшению.

Естественно, теги 'img' имеют встроенное отображение, что означает, что вы можете просто использовать следующий код:

img {
  width: 33.3%;
}

Теперь вот самая большая ошибка, с которой я столкнулся при работе со встроенными изображениями.

Отображение встроенного и встроенного блока соответствует пробелу который существует в вашей разметке HTML.

Таким образом, небольшого количества пустого пространства внизу, хотя оно и неочевидно, достаточно, чтобы изображения по-прежнему перемещались на новую строку.

img {
  width: 33.3%;
}

<div style="width: 930px; max-width: 100%; border: 1px solid blue;">
  <img src="https://picsum.photos/250/250/?random1">
  <img src="https://picsum.photos/250/250/?random2">
  <img src="https://picsum.photos/250/250/?random3"> 
</div>

Но как только этот пробел удаляется, все изображения идеально помещаются по экрану при изменении размера.

img {
  width: 33.3%;
}

<div style="width: 930px; max-width: 100%; border: 1px solid blue;"><img src="https://picsum.photos/250/250/?random1"><img src="https://picsum.photos/250/250/?random2"><img src="https://picsum.photos/250/250/?random3"></div>

Теперь сжатие разметки HTML, приведенной выше, делает ее довольно громоздкой и, в качестве альтернативы, вы можете выбрать использование плавающего метода. Установив float left для каждого изображения, вы заставите каждый тег 'img' сидеть на одном уровне, независимо от дополнительного расстояния между ними. Просто убедитесь, что родительский div также имеет значение float of left или переполнение auto, чтобы предотвратить его падение.

img {
  width: 33.3%;
  float: left;
}

Answer 3

Ширина изображения, установленная на 100%, занимает все горизонтальное пространство контейнера, так как вы хотите подогнать три изображения в линию друг к другу, разделите 100% на 3, чтобы при изменении размера контейнера три изображения занимали одну третьдоступного пространства.margin-left: -2px - чтобы граница изображения не касалась края, иначе она будет перенесена на новую строку.Попробуйте этот пример:

CSS:

img {
  display: inline-block;
  width: 33%;
  height: auto;
  margin-left: -2px;
  box-sizing: border-box;
}

Элемент HTML:

<div style="width: 930px; max-width: 100%; border: 1px solid blue;">
  <img src="camera.png"> 
  <img src="lights.png"> 
  <img src="action.png">
</div>

Answer 4

Полагаю, я мог бы поделиться решением для flexbox. Я включил приведенный ниже код, поэтому он должен быть относительно понятным. Не стесняйтесь оставлять комментарий ниже, если вы думаете, что я должен уточнить что-нибудь.

.container{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}

img {
flex: 1;
max-width: 100%;
height: auto;
max-height: 310px;
}

<div class="container" style="width: 930px; max-width: 100%; border: 1px solid blue;">
<img src="https://cdn.vox-cdn.com/uploads/chorus_image/image/44336734/fujifilmx100t-1.0.0.jpg"> 
<img src="https://d3k7s9wfq6lao0.cloudfront.net/latest/37504/main/7.jpg"> 
<img src="https://upload.wikimedia.org/wikipedia/commons/3/33/Clapperboard%2C_O2_film%2C_September_2008.jpg">
</div>

Answer 5

вы можете использовать inline-block для этого. вам нужно будет изменить ширину с помощью медиа-запросов, так как ваш экран становится меньше

img {
display:inline-block;
width: 33%;
height: auto;
}

Вы должны также обернуть изображения в div.container и дать это div a width:100%