如何修复css以便内容将包装在第二个div中？

Question

我尝试了几种显示设置，但似乎没有什么能达到我想要的效果。以下是jsfiddle

中的示例

基本上我想做的是在div中并排显示图标和名称。这是我的预期布局：

但是，当名称很长时，名称保留div会降至第一个图标div以下。

正如在jsfiddle代码中评论的那样，我已经尝试了float-left和pre-wrap，但是由于某种原因它们不起作用。

如何在第二个div中包含文本并保留在图标div的右侧？

Answer 1

尝试：display:table和display:table-cell;

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

也许您还需要vertical-align:top来对齐文字。

http://jsfiddle.net/z2vdeu6n/1/

Answer 2

试试这个：

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

演示：http://jsfiddle.net/asgLo7c7/5/

Answer 3

尝试以下答案

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

Answer 4

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

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

fiddle