4

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

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

如何使多行文本超过其旁边图像的高度，但不会在其下方换行？

额外的问题：我将如何垂直对齐它呢？

4

4 回答 4

5

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

于 2016-02-26T23:30:29.693 回答
4 

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>

于 2016-02-26T23:18:19.780 回答
1

float: left;给图片和描述都打上标签怎么样？我不知道这是否会在您的网站中造成复杂性，但这样会将所有文本保留在左侧

于 2016-02-26T23:21:40.343 回答
1

这有点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>

于 2016-02-26T23:25:38.030 回答