如何修复css，使内容包装在第二个div中？

我尝试了几种显示设置，但似乎都无法实现我想要的效果。这是我在这方面的例子

基本上，我想做的是在

div

中并排显示一个图标和一个名称。这是我的预期布局：

但是，当名称很长时，包含div的名称会下降到第一个图标div的下方

正如在JSFIDLE代码中所评论的，我尝试了float left和pre wrap，但由于某些原因它们不起作用

如何使文本在第二个div中换行并保持在图标div的右侧？

尝试下面的答案

<div style="width:200px;position:absolute">
<div style="display:inline-block;float:left">
    <img src=https://avatar.guim.co.uk/user/12754044>
</div>
<!-- 1) float:left to both div does not work. Outer div becomes a line -->
<!-- 2) float:left to 2nd div only causes name to go outside div -->
<!-- 3) add pre-wrap No change -->
<div style="position:absolute;left:65px">
    I have a very long name very lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng nane
</div>

我有一个很长的名字很长

试试下面的答案

<div style="width:200px;position:absolute">
<div style="display:inline-block;float:left">
    <img src=https://avatar.guim.co.uk/user/12754044>
</div>
<!-- 1) float:left to both div does not work. Outer div becomes a line -->
<!-- 2) float:left to 2nd div only causes name to go outside div -->
<!-- 3) add pre-wrap No change -->
<div style="position:absolute;left:65px">
    I have a very long name very lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng nane
</div>

我有一个很长的名字很长

---

尝试：

显示：表格

和

显示：表格单元格

<div style="width:200px;position:absolute;display:table">

        <div style="display:table-cell">
            <img src=https://avatar.guim.co.uk/user/12754044>
        </div>
    <!-- 1) float:left to both div does not work. Outer div becomes a line -->
    <!-- 2) float:left to 2nd div only causes name to go outside div -->
    <!-- 3) add pre-wrap No change -->
        <div style="display:table-cell;vertical-align:top">
            I have a very long name
        </div>

</div>

我有一个很长的名字

也许你还需要

垂直对齐：top

来对齐文本

---

尝试：

显示：表格

和

显示：表格单元格

<div style="width:200px;position:absolute;display:table">

        <div style="display:table-cell">
            <img src=https://avatar.guim.co.uk/user/12754044>
        </div>
    <!-- 1) float:left to both div does not work. Outer div becomes a line -->
    <!-- 2) float:left to 2nd div only causes name to go outside div -->
    <!-- 3) add pre-wrap No change -->
        <div style="display:table-cell;vertical-align:top">
            I have a very long name
        </div>

</div>

我有一个很长的名字

也许你还需要

垂直对齐：top

来对齐文本

试试这个：

<div style="width:200px;">
    <div style="float:left">
        <img src=https://avatar.guim.co.uk/user/12754044>
    </div>
    <div style="white-space: normal;word-break:break-word;">I have a very long nameI have a very long name</div>
</div>

我有一个很长的名字我有一个很长的名字

您可能不需要大部分css

演示：

试试这个：

<div style="width:200px;">
    <div style="float:left">
        <img src=https://avatar.guim.co.uk/user/12754044>
    </div>
    <div style="white-space: normal;word-break:break-word;">I have a very long nameI have a very long name</div>
</div>

我有一个很长的名字我有一个很长的名字

您可能不需要大部分css

---

演示：

设置宽度可以解决您的问题

<div class='wrap' style="width:200px;position:absolute">
    <div style="display:inline-block;float:left;width: 60px;">
        <img src=https://avatar.guim.co.uk/user/12754044>
    </div>

    <div style="display:inline-block;float:left;white-space: pre-wrap;width: calc( 100% - 60px );">I have a very long name</div>
</div>

我有一个很长的名字

---

设置宽度可以解决您的问题

<div class='wrap' style="width:200px;position:absolute">
    <div style="display:inline-block;float:left;width: 60px;">
        <img src=https://avatar.guim.co.uk/user/12754044>
    </div>

    <div style="display:inline-block;float:left;white-space: pre-wrap;width: calc( 100% - 60px );">I have a very long name</div>
</div>

我有一个很长的名字

---

绝对定位化身，相对定位名称，左侧填充等于化身的宽度；绝对定位化身，相对定位名称，左侧填充等于化身的宽度avatar@Anthony如果答案有效，请点击勾号。非常感谢您的回答。我认为“显示：表格”解决方案更适合我。尽管如此，你的答案还是被否决了@Anthony Kong如果答案有效，请点击勾号，谢谢您的回答。我认为“显示：表格”解决方案更适合我。尽管如此，你的答案还是被否决了！这是一个非常干净的解决方案@Anthony Kong：这取决于您需要什么，如果您希望文本能够与图像一起流动，这是一个非常好的解决方案：。但是，如果希望将文本和图像分开，请尝试

display:table

和

display:table cell

：@Khanh to通常不会比答案中的文本长。因此，您可以使用此解决方案。但是如果您不确定名称的长度，可以继续显示：table method这是一个非常干净的解决方案@Anthony Kong：这取决于您需要什么，如果您希望文本能够与图像一起流动，这是一个非常好的解决方案：。但是，如果希望将文本和图像分开，请尝试

display:table

和

display:table cell

：@Khanh to通常不会比答案中的文本长。因此，您可以使用此解决方案。但是，如果您不确定名称的长度，可以继续使用display:table方法