如何阻止 div 内并排的 3 个图像换行到下一行? [英] How to stop 3 images side by side inside a div from wrapping to the next line?

问题描述

我无法弄清楚这一点.我想要 3 张图片并排放置在 930 像素宽的 div 中.

因此，当您进入响应式设计模式，或明智地拖动屏幕浏览器宽度以使其变小时，所有 3 个图像并排放置在 div 内而不会换行到下一行.

但会自动开始重新调整大小以适应重新调整大小的 div.

只有当第 3 个图像被第二个图像包裹时，这 3 个图像才开始在 div 内正确调整大小.所以它看起来像下面这样.

<代码>[][][]

一旦所有图像垂直对齐，图像就会开始正确缩小.但是这张图片包在下一张图片下对我来说不太好，因为在手机上浏览网站时，或者重新调整屏幕大小时，图片仍然超大.

必须是一种阻止这些图像相互缠绕的方法，并且保持内联但自动重新调整自己的大小随着 div/page 宽度缩小?

我试过空白:nowrap;显示:内联；内联块；偶数显示:表格单元格；似乎什么都没有做我需要它做的事.但是，如果我只使用一张图片而不是 2 张或 3 张图片，那么它就可以正常工作.

您可能在想，为什么不将所有 3 张图像放在 Photoshop 中的 1 张图像中?那么每个 img 都是一个 href 链接，所以这是不可能的.即使将图像全部向左浮动仍然无济于事.

这是我的 CSS/HTML

img {最大宽度:100%；高度:自动；}

然后

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

有人能告诉我我哪里出错了吗?当父容器缩小时，如何阻止图像包裹在其他图像下方.

我不得不对每个断点使用多个不同的预先固定图像大小的@media 查询.但必须有一个更简单的方法.一些很简单的东西，我错过了.

解决方案

我想我也可以分享一个 flexbox 解决方案.我已经包含了下面的代码，所以它应该是相对不言自明的.如果您认为我应该澄清任何事情，请随时在下面发表评论.

.container{显示:弹性；弹性方向:行；flex-wrap: nowrap;对齐项目:flex-start；}图片{弹性:1；最大宽度:100%；高度:自动；最大高度: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">

I cannot figure this out. I would like 3 images to sit side by side inside a 930px wide div.

so, when you enter into responsive design mode, or drag the screen browser width wise to make it smaller all the 3 images stay side by side inside the div without wrapping to the next line.

But automatically start to re-size to fit the re-sized div.

The 3 images only start to resize correctly inside the div only when the 3rd image has wrapped under the second image. So it looks like this below.

[]
[] 
[]

Once all the images are vertically aligned the images then start to shrink down correctly. But this image wrapping under the next image is no good for me, as when viewing the website on a mobile phone, or when re-sizing the screen the images are still super large.

Must be a way to stop these images from wrapping underneath each other, and just stay inline but automatically re-size themselves as the div/page width shrinks down?

I've tried white-space: nowrap; display: inline; inline-block; even display: table-cell; nothing seems to do what I need it to do. However, if I use only one image instead of 2, or 3 then it works perfectly fine.

You're probably thinking why not just put all 3 images inside 1 image in photoshop? Well each img is an href link, so that's not possible. Even floating the images all to the left still doesn't help.

Here's my CSS/HTML

img {

max-width: 100%;
height: auto;

}

then

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

Can someone tell me where I may be going wrong please? How can I stop images wrapping underneath other images when the parent container shrinks down.

I've had to resort to using multiple @media queries of different pre-fixed image sizes per break-point. But there's got to be a much much easier way. Something so simple that I'm missing.

解决方案

I figure I might share a flexbox solution as well. I've included the code below so it should be relatively self explanatory. Feel free to leave a comment below if you think I should clarify anything.

.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>

这篇关于如何阻止 div 内并排的 3 个图像换行到下一行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！