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

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

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

вам также следует обернуть образы в div.container и дать этому divwidth:100%

Ширина изображения, установленная на 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>

Думаю, я тоже могу поделиться решением для 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>

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

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

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

img {
  width: 33.3%;
}

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

A display of inline and inline-block is respective of the whitespace that exists within your HTML markup.

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

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, приведенной выше, делает ее довольно громоздкой, поэтому в качестве альтернативы вы можете использовать метод с плавающей запятой. Устанавливая плавающее значение left для каждого изображения, вы заставляете каждый тег img располагаться на одном уровне, независимо от дополнительного промежутка между ними. Просто убедитесь, что родительский div также имеет плавающее значение left или переполнение auto, чтобы предотвратить его коллапс.

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

После многих дней тестирования различных способов, вот идеальный способ сделать это без изгиба. Убедитесь, что каждое изображение заключено в отдельный 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, мы можем сделать изображение ширина: 100%; или максимальная ширина: 100%;, а затем вместо этого добавить часть ширина: 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 гибкого контейнера. И без собственного контейнера div изображения не сохранят никакого соотношения сторон при сжатии / увеличении. Они просто сжимаются и перекосятся вместе.

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

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