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

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

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

更新

能够使用内联块将两者对齐到底部，但我无法使用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/

Answer 2

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

.p1{
   font-size: 36px;
   display: inline-block;
   width: 40%;
}

.p2{
   display: inline-block;
   vertical-align: bottom;
   width: 40%;
}

Answer 3

您只需要将white-space:nowrap;添加到您的包装类中。

.wrapper {
   border: 1px solid red;
   width: 400px;
  white-space:nowrap;
}

http://cdpn.io/elzFk

Answer 4

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

.p1{
   font-size: 36px;
   display: inline-block;
   width: 40%;
}

.p2{
   display: inline-block;
   vertical-align: bottom;
   width: 40%;
}

当您使用宽度：50％执行上述操作时，您必须删除div之间的所有空格。也就是说，因为内联块定位就像一个＆lt; img＆gt;取决于他们周围的空白。

将图像对齐到底部

4 个答案: