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

我已成功地将一行文本与图像对齐（）

用户名

但是，当我尝试添加另一行文本时，它会包装在图像（）下

用户名


用户名

如何使多行文字超过其旁边图像的高度，但不在其下方环绕

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

img{
浮动：左；
边缘顶部：5px；
右边距：15px；
边缘底部：15px；
}
p{
显示：表格单元格；
宽度：400px；
}

文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字这里文字

给一个

浮动：左标记图片和描述。我不知道这是否会给你的网站带来麻烦，但那样的话，它会把所有的文字都保留在左边，这有点太老套了，但应该可以


.profile图片{
显示：块；
利润率：0 10px 10px 0；
浮动：左；
}
.profile详细信息{浮动：左；宽度：计算（100%-50px-10px）；}

文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本
基于@freestock.tk的表格示例进行构建


.profile详细信息包装{display:table row；}
.个人资料图片{
显示：表格单元格；
垂直对齐：顶部；
右边距：10px；
}
.profile详细信息{显示：表格单元格；垂直对齐：顶部；}

文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字此处文字文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本
为什么
col-\uun
类不适合你？@b我试过了，但是在一个响应环境中，文本没有与图像对齐（当然有一点填充）。调整窗口大小时，文本可能重叠或距离图像太远，因此不应调整图像大小。
<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>