У меня есть div (с фиксированной шириной), в котором 2 элемента изображения являются дочерними.
Каждое изображение имеет ту же ширину, что и div, поэтому изображения размещаются не в одной строке ( см. Скриншот ). Это здорово, но я хочу, чтобы изображения отображались таким же образом (одно поверх другого), но в нижней части div.
Я могу добиться такого поведения в некоторых браузерах, используя:
-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);
на div css.
Есть ли лучший способ добиться этого?
Вот код, который я использовал для примера:
<html> <head> <style type="text/css"> .container {background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;height:116px; width:33px} </style> </head> <body> <div class="container"> <img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px"> <img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px"> </div> </body> </html>
Решение: Добавьте внутренний div и установите его положение снизу:
<html> <head> <style type="text/css"> .container {background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;height:116px;position:relative; width:33px;} .inner {position:absolute;bottom:0px;} </style> </head> <body> <div class="container"><div class="inner"> <img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px"> <img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px"> </div></div> </body>
Спасибо Джошу за предложение.
Сделайте контейнер position:relative; и установите изображения на position:absolute; bottom:0;
position:relative;
position:absolute; bottom:0;
Однако, это не будет складывать изображения. Они будут перекрывать друг друга. Если вам нужно их сложить, самый простой (динамический) способ - обернуть изображения в другой контейнер (например, div), а затем установить стили на it . Например ...
div
Markup:
<div class="container"> <div class="innerContainer"> <img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px" /> <img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px" /> </div> </div>
CSS:
.container { background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat; height:116px; width:33px; position:relative; } .container .innerContainer { position:absolute; bottom:0; }