将子div与底部对齐

时间:2014-03-06 19:47:58

标签: html css

在弄清楚如何将子div与父级底部对齐时遇到问题。

http://i.stack.imgur.com/bfFZG.png

HTML:

<div class="product_standard" >
    <div class="product_low" >

    </div>
</div>

1 个答案:

答案 0 :(得分:2)

我按照图片做了一个演示。

----下面是CSS代码----

#main{background:url("http://lorempixel.com/500/500");
  width:500px;
 height:500px;
  position:relative;
  }
#main:after{
   content: "12.49 EURO";
  z-index:1;
  position:absolute;
  bottom:0;
  height:50px;
  width:100%;
  font-size:2em;
  color:#000000;
  background-color:rgba(255, 255, 255, 0.5)
}

--- HTML代码看起来像----

<div id="main"> </div>

这是工作演示。 http://jsbin.com/duhicoqo/1/