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

在包装上使用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>

Answer 2

左图像需要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>

css水平调整2个图像

2 个答案: