html - How can I make images in a row not condense to fit smaller resolutions?

Question

Not using Bootstrap or the like, I have a series of images in a row with a total max-width: 1280px; and min-width:1280px; (all the images add up to 1280px). But on computers with a lower resolution then 1280, the images wont all stay in a line, some will drop to the next line to fit the screen. I understand keeping them in a line will force the page off to the left requiring sideways scrolling, but to me that is preferable to condensing.

I know this is a newbie question but if anyone could help me out or offer a solid alternative that a newbie can pull off rather easily, that would be appreciated.

Answer 1

您可以以百分比设置图像宽度，因此它们将始终填满父元素的宽度：

.wrapper { max-width: 1280px; }
.wrapper img { width: 10%; } /* 10 images in a row */

如果您想要水平滚动条版本，请使用width而不是max-width：

.wrapper { width: 1280px; }

Answer 2

添加white-space: nowrap;到包含图像的元素。