Как получить два изображения в правом нижнем углу div?

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

Пекка обращается к опции «друг над другом», но если вы хотите расположить их рядом:

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;
}