Question

当我在我的div中输入文字时，他会在图片下面。如果我输入几个单词DIV漂浮在图片旁边。问题在哪里？

.container {
        width: 250px;
        display: block;
        overflow: auto;
    }
    .container img {
        float: left;
    }
    .inside {
        float: left;
    }

<div class="container">
    <img src="lib/images/asd-261269281.jpg" width="92" height="92">
    <div class="inside">text text text text text text text text text text text text </div>
</div>

Answer 1

将图片作为背景。这样你可以用文字填充它。

像这样：

<div class="container">text text text text</div>

Jsfiddle

Answer 2

发生这种情况是因为当您添加更多文本以使其移动到图像下方时，文本会溢出定义框的边界。您可以在这里找到几种不同的选项。您可以设置内部类的宽度，以便它将包装文本。

.inside {
    float: left;
    width: 55%; // Defines the max width of the box before it can wrap vertically.
}

您可以使用的第二种方法是将.inside类的显示类型设置为inline-block：

.inside {
    display: inline-block;
    width: 55%;
}

Answer 3

这会帮助你..：D

＆＃13;

animate

＆＃13;

.container {
        width: 250px;
        display: block;
        overflow: auto;
    }
    .container img {
        float: left;
    }
    .inside {
        float: left;
        max-width:138px;
    }

＆＃13;

当我输入更多文本时，浮动的div会下降

3 个答案: