1

我无法弄清楚这一点。我希望 3 张图片并排放置在 930 像素宽的 div 内。

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

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

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

[]
[] 
[]

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

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

我试过 white-space: nowrap; 显示：内联；内联块；偶数显示：表格单元格；似乎没有什么可以做我需要做的事情。但是，如果我只使用一个图像而不是 2 个或 3 个图像，那么它工作得非常好。

你可能在想为什么不把所有 3 张图片都放在 Photoshop 的 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 查询。但是必须有一个更简单的方法。如此简单的东西，我错过了。

4

5 回答 5

6

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

于 2018-05-13T22:01:17.110 回答
2

你可以用inline-block这个。随着屏幕变小，您将需要使用媒体查询更改宽度

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

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

于 2018-05-13T21:49:37.913 回答
1

设置为 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>
于 2018-05-13T21:51:04.190 回答
0

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

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;
}
于 2018-05-14T16:23:07.560 回答
0

经过多天的各种方法的测试，这里是在没有 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 中，我们可以将图像宽度设置为：100%；或最大宽度：100%；然后添加宽度：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 容器中的任何图像都以相同的方式设置。任一宽度：100%；或最大宽度：100%；否则，图像在谷歌浏览器中根本不会缩小/缩小。

我已经包含了与上面相同的方法，只是这次是在 flexbox 版本中。

于 2018-05-26T21:44:35.457 回答