javascript - 在一个 div 中垂直分布两个图像

Question

我在一个固定大小的 div 中有两个相似的图像。图像一个接一个地放置。我想垂直展开图像，以便一个 img 贴在顶部，另一个贴在底部。

<div style='text-align: center; border: 1px solid black;'>text
    <div style='border:1px solid black;height: 150px;'>
        <img style='float: left; clear: both;' src='http://iconizer.net/files/Sketchdock_Ecommerce_Icons/orig/arrow-up-blue.png'>
        <img style='float: left; clear: both;' src='http://iconizer.net/files/Sketchdock_Ecommerce_Icons/orig/arrow-down-blue.png'>
    </div>
</div>

Answer 1

@Teemu 是对的。

• 将 position: relative; 添加到父 DIV。
• 添加position:absolute；
底部:4px； left: 0; 到第二个 img。

运行下面的片段:

<div style='text-align: center; border: 1px solid black;'>text
    <div style='position: relative; border: 1px solid black; height: 150px;'>
        <img style='float: left; clear: both;' src='http://iconizer.net/files/Sketchdock_Ecommerce_Icons/orig/arrow-up-blue.png' />
        <img style='float: left; clear: both; position: absolute; bottom: 2px; left: 0;' src='http://iconizer.net/files/Sketchdock_Ecommerce_Icons/orig/arrow-down-blue.png' />
    </div>
</div>