[英]How do I get two images to be in the bottom right corner of a div?
the div is 200x200 and the images is 20x20 and there are two of them. div为200x200,图片为20x20,其中有两个。 i want them both to be located in the bottom right corner.
我希望它们都位于右下角。
It's hard to tell the perfect solution with the little info you give, but this should work: 用您提供的少量信息很难说出完美的解决方案,但这应该可行:
<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>
Note that the div
needs position: relative
or absolute
to work. 请注意,
div
需要position: relative
或absolute
才能工作。
Pekka addresses the 'on top of each other' option, but if you want to position them side by side: Pekka解决了“彼此重叠”的问题,但是如果您希望将它们并排放置:
div#container {position: relative; }
div#container img {position: absolute; bottom: 0; right: 0; }
div#container img + img {position: absolute; bottom: 0; right: 20px; }
This does have the slight problem that if the image-size changes the CSS would have to be changed also (either by hand, or dynamically with JavaScript or serverside language). 这确实存在一个小问题,即如果图像大小更改,那么CSS也必须更改(手动更改,或使用JavaScript或服务器端语言动态更改)。 Plus if you want to add more images you'd have to add further rules.
另外,如果要添加更多图像,则必须添加其他规则。
You might get away from this if you put the images into a list, which would allow it to be more dynamic: 如果将图像放入列表中,则可能会避开这种情况,这将使其更具动态性:
<ul>
<li><img src="img1.png" /></li>
<li><img src="img2.png" /></li>
<li><img src="img3.png" /></li>
</ul>
CSS: CSS:
ul {position: absolute; bottom: 0; direction: rtl; /* for arranging the inline elements/text right-to-left */}
ul li {display: inline; }
#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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.