css调整2个图像的水平大小
css调整2个图像的水平大小
提问于 2012-08-17 22:47:16
我被一段非常基础的代码卡住了，我想我肯定不知道正确的语法。
我想要并排显示2张图片(水平显示，因此X| X)，并且它会根据屏幕的宽度自动调整大小……
我的问题是，当屏幕宽度减小时，第二个图像会低于第一个图像。我试着调整我的DIV Contener的高度，但第二张图像出来了……能帮我修一下吗？附上了我当前的代码。
<div style="width:100%;max-height:150px;border:1px solid black;" >
<img src="http://chezsilvia.c.h.pic.centerblog.net/o/3963dc3b.jpg" style="max-width:100%;"/>
<img src="http://chezsilvia.c.h.pic.centerblog.net/o/3963dc3b.jpg" style="max-width:100%;"/>
</div> 回答 2
Stack Overflow用户
发布于 2012-08-17 22:50:54
在包装器上使用position: relative;，在图像上使用width: 50%; float: left;
<div style="position: relative; float: left; width: 100%; border: solid 1px #000">
<img src="yourPath.jpg" style="float: left; width:50%;">
<img src="yourPath.jpg" style="float: left; width:50%;">
</div>Stack Overflow用户
发布于 2012-08-17 22:51:54
左图需要width: 50%;和float:left;
这是它的jsFiddle：http://jsfiddle.net/vwMWn/18/
你的代码：
<div style="width:100%;max-height:150px;border:1px solid black;" >
<img src="http://chezsilvia.c.h.pic.centerblog.net/o/3963dc3b.jpg" style="max-width:50%; float:left"/>
<img src="http://chezsilvia.c.h.pic.centerblog.net/o/3963dc3b.jpg" style="max-width:50%;"/>
</div> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12008003
复制相关文章
相似问题
腾讯云开发者
