如何在图像旁边对齐多行文本而不将其换行？

Question

我已成功将一行文本与一张图片对齐 (fiddle)。

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

但是，当我尝试添加另一行文本时，它会换到图像下方 (fiddle)。

<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

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 2

给图片和描述都加上 float: left; 标签如何？我不知道这是否会给您的网站带来麻烦，但这样它会将所有文本保留在左侧

Answer 3

这有点老套，但应该可以...

.profile-picture {
  display: block;
  margin: 0 10px 10px 0;
  float: left;  
}
.profile-details { float: left; width: calc(100% - 50px - 10px); }

<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 4

基于@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>

如何在图像旁边对齐多行文本而不将其换行？

How can I align multi-line text next to an image without it wrapping underneath?

html

css

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4