如何阻止 div 内并排的 3 个图像换行到下一行？

Question

我想不通。我希望 3 张图片并排放置在 930 像素宽的 div 内。

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

但会自动开始调整大小以适应调整后的 div。

只有当第三张图片包裹在第二张图片下方时，这三张图片才开始在 div 内正确调整大小。所以它看起来像下面这样。

[]
[] 
[]

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

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

我试过 white-space: nowrap;显示：内联；内联块；偶数显示：表格单元格；似乎什么都没有 做我需要它做的事。但是，如果我只使用一张图片而不是 2 张或 3 张图片，那么效果就很好了。

您可能在想，为什么不在 Photoshop 中将所有 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

我想我也可以分享一个 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 2

您可以为此使用inline-block。随着屏幕变小，您将需要通过媒体查询更改宽度

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

您还应该将图像包装在 div.container 中，并给这个 div 一个 width:100%

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

我的答案或多或少是对我在此处写的 Tom 的跟进，所以我不会溢出 cmets 部分。

max-width: 100% 的问题在于，在每个图像超出其父级（在本例中为 div）之前，相对大小不会开始生效。由于所有图像都具有基于其图像 src 的默认绝对大小，因此它们会在调整大小之前强制自己进入新行，因此只有这样 max-width 才会开始执行您想要的操作。根据 Tom 的回答，33% 的百分比大小会强制图像具有一个相对大小，这会导致它们立即缩小。

“img”标签自然会显示为内联，这意味着您可以选择只使用以下代码：

img {
  width: 33.3%;
}

现在这是我在处理内联图像时遇到的最大问题。

inline 和 inline-block 的显示是各自的空白 存在于您的 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 标记使其相当笨拙，因此作为替代方案，您可以选择使用浮动方法。通过为每个图像设置一个左浮动，您将强制每个“img”标签齐平，而不管它们之间的额外间距如何。只要确保给父 div 一个左浮动或一个 auto 溢出来阻止它崩溃。

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

Answer 5

经过多日测试各种方法后，这里是在没有 flex 的情况下完成此操作的完美方法。确保每张图片都包含在自己的 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%; 或 ma​​x-width: 100%; 然后添加 width: 33.33%; 部分以前位于 img {} 下，改为新的 3 个 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 容器中。否则，当您将它们包含在超链接锚中时，您会发生一些奇怪的事情，也就是说，如果所有三个图像都只是放在第一个 flex 容器 div 中。如果没有自己的 div 容器图像，它们在缩小/放大时将不会保持任何类型的纵横比。他们只是挤压和歪斜在一起。

最后非常重要！始终确保 flex 容器中的任何图像都以相同的方式设置。 width: 100%; 或 ma​​x-width: 100%; 否则，图像在 Google Chrome 中根本不会缩小/缩小。

I've included this same method as above, only this time in a flexbox version.