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

建立在@ freestock.tk的表格示例..

＆＃13;

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

＆＃13;

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

＆＃13;

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;标记。我不知道这是否会在您的网站上产生复杂性，但这样会将所有文本保留在左侧

Answer 4

这有点hackish，但它应该工作......

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

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

4 个答案: