html - 顶部对齐文本到图像

Question

我尝试在图像的右侧显示标题和作者姓名。标题必须与图像顶部对齐，如下图所示。

我尝试使用填充和边距，但现在，这是我得到的:

( JSFiddle here )

.post-head{
display: block;
position:relative;


}

.post-head-info {

  overflow:hidden;
  padding-top:0px;
  margin-top:0px;

}

.picture{
  float:left;
  overflow:hidden;
  position:relative;
  padding-right: 10px;
}

h1 {
  padding-top:0px;
  padding-bottom:0px;
  margin-top:0px;
  font-size: 24px;
}

span{
  padding-top: 0px;
  margin-top:0px;
}

<div class="post-head" >

  <div class="picture">
      <img src="https://upload.wikimedia.org/wikipedia/commons/3/31/Japan-bio-stub.png" />
  </div> 

  <div class="post-head-info" >

    <h1>Title</h1>
    <span>Posted on by author</span> 

  </div>

   </div>

Answer 1

间距是由 h1 的 line-height 引起的。如果你将它减少到大约 20px，这应该意味着你的文本从 div 的顶部开始。请注意，如果您的文字换行，可能会导致您的文字重叠或靠在一起，因为您的字体大小为 24 像素。

另一种方法是在 h1 中添加一些负边距。两个例子如下:

.post-head {
  display: block;
  position: relative;
}

.post-head-info {
  overflow: hidden;
  padding-top: 0px;
  margin-top: 0px;
}

.picture {
  float: left;
  overflow: hidden;
  position: relative;
  padding-right: 10px;
}

h1 {
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  font-size: 24px;
}

span {
  padding-top: 0px;
  margin-top: 0px;
}

.line-height {
    line-height:20px;
}

.minus-margin {
   margin-top:-4px;
}

<div class="post-head">
  <div class="picture">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/31/Japan-bio-stub.png" />
  </div>
  <div class="post-head-info">
    <h1 class="line-height">Title that might wrap Title that might wrap Title that might wrapTitle that might wrap</h1>
    <span>Posted on by author</span>
  </div>
</div><br>

<div class="post-head">
  <div class="picture">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/31/Japan-bio-stub.png" />
  </div>
  <div class="post-head-info">
    <h1 class="minus-margin">Title</h1>
    <span>Posted on by author</span>
  </div>
</div>