如何在一个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。

仅在第三张图像包装在第二张图像下时才能在div内正确调整大小。所以它看起来像下面这样。

  [] 
 [] 
 [] 
  

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

必须是阻止这些图像彼此缠绕的方法，并且保持内联，但会自动重新调整大小
，因为div /页面宽度缩小了吗？

我试过了white-space：nowrap;显示：内联;内联块;甚至显示：table-cell;没有什么似乎
做我需要它做的事情。但是，如果我只使用一个图像而不是2或3，那么它的效果就很好。

你可能会想，为什么不把所有3张图像放在1张图片中在Photoshop中？那么每个img都是href链接，所以这是不可能的。
即使将图像全部移动到左侧仍然没有帮助。

这是我的CSS / HTML

  img {
 
最大宽度：100％; 
 height：auto; 
 
 
 code 
 
 $ b 
然后
 
 
 < 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查询每个断点。但是有一个更简单的方法。这件事很简单，我错过了。 
解决方案
我想我也可以共享一个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;}  
 
  >< 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>  
 
 
 
 
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屋！