首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >一排流体图像

一排流体图像
EN

Stack Overflow用户
提问于 2012-02-18 09:50:45
回答 1查看 3.8K关注 0票数 1

我遇到了一个小小的问题,不知为什么,我不知道如何解决。这可能是这样的情况之一,它看起来很简单,但不可能实现。问题是:

  • ,我想在一个div中添加几张图片。它们需要在

  • 之间没有间隔,div有一个百分比宽度设置,所以当它达到某个点时,我希望这些图像开始变小。现在发生的情况是,当div不能再包含图像时,图像就会垂直下降。

要使图像缩小,诀窍是在css文件中添加img { max-width: 100%;},但在这种情况下不起作用。我想问一下,有没有人知道这个问题的简单解决方案?我可以尝试将每个图像的最大宽度设置为不同的数字,这取决于它们的宽度,但我认为计算将在某些浏览器中关闭(我们都知道有些浏览器如何处理百分数和小数位)。

提前感谢

不工作的例子:

代码语言:javascript
代码运行次数:0
运行
复制
<div style="width:40%"><img src="img1.jpg" /><img src="img2.jpg" /></div>
CSS: img { max-width: 100%; }

备注:这是一个完美的单一图像,所以我正在寻找一些简单的东西,为多个图像。

工作实例:

代码语言:javascript
代码运行次数:0
运行
复制
<div style="width:40%"><img src="img1.jpg" style="width:47.88%" /><img src="img2.jpg" style="width:52.12%" /></div>

注释:计算百分比宽度是一种痛苦,我不确定它是否在所有情况下都有效。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-02-18 10:41:49

我认为如果你试图在一个div内完成这一切,你将是一场艰难的战斗。一个简单可靠的解决方案是使用一个表。你也可以用一堆近似于一张表的div来做。

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

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

http://jsfiddle.net/chad/uSrYx/2/ -一个稍微不同的效果内嵌块div在一个空白:现在的容器。只有在事先知道每行有多少图像时,才有可能

这完全取决于你想让它在旧浏览器中退化的方式。使用表格将使所有东西都保持在同一行上,但这一行的宽度不会缩小。使用div将图像垂直堆叠。

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9340179

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档