0

我正在使用以下内容将两张图片并排放置。图片尺寸不同(右边的比左边的高),但我希望它们在顶部对齐,而不是像现在这样在底部对齐。

关于顶部对齐第二个 div 的正确方法有什么建议吗?

谢谢

<div style="display: inline-block; margin-right: 10px">
<img src="right-side.jpg" alt="taller image">
</div>

<div style="display: inline-block; margin-right: 10px">
<img src="left-side.jpg" alt="shorter image">
</div>
4

2 回答 2

1

一种方法是浮动容器 div,例如:

<div style="display:block; float: left; margin-right: 10px">
    <img src="right-side.jpg" alt="taller image" style="height: 150px;">
</div>

<div style="display:block; float:left; margin-right: 10px">
    <img src="left-side.jpg" alt="shorter image" style="height: 50px;">
</div>​

...在这种情况下您实际上不需要display: block;,因为它是该元素的默认值。

于 2012-07-10T15:07:16.393 回答
0

我不会使用内联块,而是将它们都向左浮动。

于 2012-07-10T15:07:37.227 回答