css - css 水平调整 2 张图像大小

Question

我被困在一段非常基本的代码上，我想我一定不知道正确的语法。

我想并排显示 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> 

Answer 1

需求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> 

Answer 2

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>