Question

我偶然发现了一个小问题，由于某种原因，我不知道如何解决。它可能只是其中一种看似简单但无法实现的情况。这就是问题所在：

我想在一个div中添加一些彼此相邻的图像。
div设置了一个百分比宽度，以便达到某个点，我希望这些图像开始变小。现在发生的事情是，当div不能再包含它们时，图像会垂直向下垂落。

让图像缩小的技巧是添加img {max-width：100％;在css文件中，但在这种情况下不会起作用。我想问一下是否有人知道这个问题的简单解决方案？我可以尝试将每个图像的最大宽度设置为不同的数字，具体取决于它们的宽度，但我担心在某些浏览器中计算将会关闭（我们都知道某些浏览器如何处理带小数位的百分比）。

提前致谢

非工作示例：

<div style="width:40%"><img src="img1.jpg" /><img src="img2.jpg" /></div>
CSS: img { max-width: 100%; }

评论：这对于单个图像来说是完美的，所以我正在为多个图像寻找简单的东西。

工作示例：

<div style="width:40%"><img src="img1.jpg" style="width:47.88%" /><img src="img2.jpg" style="width:52.12%" /></div>

评论：计算百分比宽度是一种痛苦，我不确定它是否会在所有情况下都有效。

Answer 1

如果你试图在一个div中完成所有这一切，我认为你将会打一场艰苦的战斗。一个简单，可靠的解决方案是使用表格。您也可以使用一组近似表格的div来完成它。

http://jsfiddle.net/chad/uSrYx/ - 表格

http://jsfiddle.net/chad/uSrYx/1/ - 伪装为表格的div

http://jsfiddle.net/chad/uSrYx/2/ - 与white-space：nowrap容器内的inline-block div略有不同。只有在事先知道每行上有多少图像时才可能

这完全取决于您希望在旧浏览器中降级的方式。使用表格会将所有内容保持在同一行，但该行的宽度不会缩小。使用div将垂直堆叠图像。

流量图像在一行

1 个答案: