如何在图像旁边对齐多行文本而不将其包装在图像下面？

Question

我已经成功地将一行文本与图像(小提琴)对齐。

<div class="profile-details-wrapper">
  <img class="profile-picture" src="http://placehold.it/50x50" />
  <span class="profile-details">
    username
  </span>
</div>

但是，当我尝试添加另一行文本时，它会被包装在图像(小提琴)下面。

<div class="profile-details-wrapper">
  <img class="profile-picture" src="http://placehold.it/50x50" />
  <span class="profile-details">
    username
    <br />
    username
  </span>
</div>

怎样才能有多行文本超过它旁边的图像高度，但没有包装在它下面？

额外的问题:我将如何对它垂直，也？

Answer 1

基于@freestock.tk的表格示例。

​

.profile-details-wrapper { display: table-row; }
.profile-picture {
  display: table-cell; 
  vertical-align: top; 
  margin-right: 10px;
}
.profile-details { display: table-cell; vertical-align: top; }

<div class="profile-details-wrapper">
  <img class="profile-picture" src="http://placehold.it/50x50">
  <div class="profile-details">
text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here
  </div>
</div>

​

Answer 2

​

img {
  float:left;
  margin-top: 5px;
  margin-right: 15px;
  margin-bottom: 15px;
}

p {
  display: table-cell;
  width: 400px;
}

<div class="profile-details-wrapper">
  <img class="profile-picture" src="http://placehold.it/50x50" />
  <span class="profile-details">
<p>text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here </p>
  </span>
</div>

​

Answer 3

给图片和描述提供一个float: left;标记如何？我不知道这是否会给你的网站带来麻烦，但那样的话，它就会把所有的文字都放在左边。