html - 图像底部对齐

Question

我有两个并排的 div，一个带有文本，另一个带有图像 CodePen Example :

<div class="wrapper">
  <div class="p1">    
    Lorem Ipsum is simply dummy text.        
  </div>
  <div class="p2">
    <img src="http://placehold.it/200x100">
 </div>    
</div>

还有 CSS:

div.wrapper {
  border: 1px solid red;
  width: 400px;
  .clear;
}

div.p1, div.p2 {
  float: left;
  width: 50%;
}

div.p1 {font-size: 36px;}

当文字高于图片时，图片底部有空格。

我希望图像始终与底部对齐。

更新

可以使用 inline-block 将两者都对齐到底部，但我无法将 50% 用于 div 宽度...为什么？如何解决？

我该怎么做？

谢谢你， 米格尔

Answer 1

试试这个: HTML:

<div class="wrapper clear">
  <div class="p1">
    Lorem Ipsum is simply dummy text.        
  </div>
  <div class="p2">
    <img src="http://placehold.it/200x100">
  </div>    
</div>

和 CSS:

.wrapper {
   border: 1px solid red;
   width: 400px;
   position:relative;
}

.p1{
   font-size: 36px;
   display: inline-block;
  margin:0;
  float:left;
  padding:0;
   width: 50%;
}

.p2{
  margin:0;
   display: inline-block;
   vertical-align: bottom;
  float:left;
  position:absolute;
  bottom:0;
   width: 50%;
   img{display: block;}
}


.clear {

  &:after {
    content: "";
    display: table;
    clear: both;
  } // :after

} // clear

http://codepen.io/anon/pen/byIda

编辑: 看到这个 http://codepen.io/anon/pen/klivC/