Question

div为200x200，图像为20x20，其中有两个。我希望它们都位于右下角。

Answer 1

很难用你提供的小信息告诉完美的解决方案，但这应该有效：

<div style="position: relative; width: xyz; height: xyz">
  <img src="..." style="position: absolute; right: 0px; bottom: 0px">
  <img src="..." style="position: absolute; right: 0px; bottom: 0px">
</div>

请注意，div需要position: relative或absolute才能生效。

Answer 2

Pekka解决了“在彼此之上”的选项，但是如果你想将它们并排放置：

div#container {position: relative; }

div#container img {position: absolute; bottom: 0; right: 0; }

div#container img + img {position: absolute; bottom: 0; right: 20px; }

这确实存在一个小问题，如果图像大小发生变化，CSS也必须（手动或使用JavaScript或服务器端语言动态更改）。此外，如果您想添加更多图像，则必须添加更多规则。

如果您将图像放入列表中，您可能会远离此，这将使其更具动态性：

<ul>
<li><img src="img1.png" /></li>
<li><img src="img2.png" /></li>
<li><img src="img3.png" /></li>
</ul>

CSS：

ul {position: absolute; bottom: 0; direction: rtl; /* for arranging the inline elements/text right-to-left */}

ul li {display: inline; }

Answer 3

CSS

#outer-div {
    width: 200px;
    height: 200px;
    position: relative;

}

#inner-div1,
#inner-div2 {
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 0;
}

#inner-div1 {
    right: 0;
}

#inner-div2 {
    right: 20px;
}

如何让两个图像位于div的右下角？

3 个答案:

CSS