液体图像在一行

我已经偶然发现了一个小问题，出于某种原因，我不知道如何解决。这可能是其中一种看起来很简单但不可能实施的情况之一。这里的问题：液体图像在一行

我想在一个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>

评论：计算百分比宽度是一种痛苦，我不知道，如果它甚至会在所有情况下工作。

来源

2012-02-18 Marius

我已经说过了。以百分比形式将每个图像设置为特定的宽度。我也尝试过在特定宽度的浮动div中围绕它们。这两种方法都有效，但正如我所提到的，我担心一些浏览器会错误地进行计算。更不用说这样做是一件痛苦的事情。我只是想找到一个更简单的方法。 – Marius 2012-02-18 10:00:24

显示你的代码plz。 – 2012-02-18 10:04:04

在原问题中发布一些示例 – Marius 2012-02-18 10:09:59

我认为如果你尝试在一个单独的div内完成所有的工作，你将会面临一场艰苦的战斗。一个简单可靠的解决方案是使用一张桌子。你也可以用一堆近似表格的div来做到这一点。

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

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

http://jsfiddle.net/chad/uSrYx/2/ - 与内联块的div白色空间的内侧的略微不同的影响：NOWRAP容器。只有在您知道每行有多少图像之前，才可以使用

这一切都取决于您希望在较旧的浏览器中如何降级。使用表格会将所有内容保留在同一行上，但该行的宽度不会缩小。使用div将垂直堆叠图像。

来源

2012-02-18 10:41:49

谢谢你的时间。我想我最喜欢第三种解决方案。但是研究这些例子的一个问题仍然存在 - 如果我的图像需要彼此“卡住”而没有任何间隔，那该怎么办？这意味着它们的容器永远不会比图像更宽。这意味着......浮点百分比宽度（假设图像宽度不相等），不是吗？和百分比作为浮动...我想，但我不知道，一些浏览器将无法正确渲染。 – Marius 2012-02-18 11:36:53

http：// jsfiddle。net/chad/uSrYx/4 /我改变了内容框的宽度：33％到最大宽度：33％。现在图像拼接在一起，但图像行不一定占用容器的整个宽度。我设计的图像加剧了这一点。如果图像的总宽度大于容器的宽度，则不应该成为问题。如果你使用这种技术，只要确保你所有的div都相互对立，如下所示：

。否则，你会得到他们之间的空间，这会弄乱它。 – 2012-02-18 12:04:19

聪明...谢谢！ – Marius 2012-02-18 12:15:59

液体图像在一行

回答

相关问题