Bootstrap将img带到div的底部

时间:2016-09-08 11:35:40

标签: html css twitter-bootstrap css3 twitter-bootstrap-3

我使用bootstrap,我在div中有一个img,img是顶部对齐的,我无法坚持div的底部。

<div class="col-lg-6 col-md-6" style="height: 100%">
    <img src="images/tv/Smartphone_Hand.png" class="img-responsive" style="vertical-align: bottom; position: absolute;">    
</div>

2 个答案:

答案 0 :(得分:2)

<div class="col-lg-6 col-md-6" style="height: 100%">
    <img src="images/tv/Smartphone_Hand.png" class="img-responsive" style="position:absolute;bottom:0">    
</div>

使用他的

答案 1 :(得分:0)

我看到你正在尝试使用vertical-align:bottom。来自MDN

  

vertical-align CSS属性指定了一个垂直对齐方式   内联或表格框。

因为您的显示器可能是初始(块),所以它不起作用。你可以将它定位为绝对的,你已经完成了,并把它放在底部:

img {
      position:absolute;
      bottom:0;
  }
<img src="https://s-media-cache-ak0.pinimg.com/236x/d1/f9/eb/d1f9eb025650eb3ff13a26697ed9994a.jpg" alt="test" />

此外,您应该尽可能避免使用内联样式。随着项目的展开,它使样式变得更加复杂。