Geek Answers Handbook

Stacking HTML elements at the bottom of the container

I have a div (with a fixed width) that has 2 image elements as child elements.

Each image has the same width as the div, so the images are not placed on the same line ( see screenshot ).
This is great, but I want the images to display the same way (one on top of the other), but at the bottom of the div.

I can achieve this behavior in some browsers using:

-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);

on css div.

Is there a better way to achieve this?

Here is the code I used as an example:

<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>
+5
source share
2 answers

Make a container position:relative;and set the images toposition:absolute; bottom:0;

. . , , () (, div), . ...

:

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

: 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>

.

+2

More articles:


All Articles