html - 将浮动 div 的文本设置为浮动和正确换行，而无需硬编码 div 宽度？

Question

看看下面的jsfiddle：

http://jsfiddle.net/tTNNm/

如何在不硬编码CSS 中div.text的宽度的情况下让图像 div 旁边浮动？div.text

div 应该是其内容的全宽，然后高度应该由由于其父元素的宽度限制而需要换行到下一行的内容量来确定。所以在我的小提琴中，为什么会div.text占用完整的 300px 宽度并强制自己到下一行，而不是在计算宽度为 200px 的图像 div 旁边适合？

参考：

<div class="test">
    <div>
        <img src="http://www.cadcourse.com/winston/Images/SoccerBall.jpg" width="100" height="100"/>
    </div>
    <div class='text'>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>​

div.test {
    width: 300px;
    outline: 1px solid blue;
    height: 100px;
}

div.test div {
    float: left;
    outline: 1px solid red;
}

​</p>

Answer 1

这是因为两个 div 都继承了float: left;. 尝试将此添加到您的 CSS 中：

div.test div.text {
    float: none;
    outline: 1px solid red;
}

Answer 2

此代码将使文本不会环绕图像，而只是简单地“调整” div 以适应相应的大小（假设图像为 100 像素宽）。

HTML

<div class="test">
    <div class="image">
        <img src="http://www.cadcourse.com/winston/Images/SoccerBall.jpg" width="100" height="100"/>
    </div>
    <div class='text'>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>

CSS

div.test {
    width: 300px;
    outline: 1px solid blue;
    height: 100px;
}

div.test div.image {
    float: left;
    outline: 1px solid red;
}
div.test div.text {
    outline: 1px solid orange;
    padding-left:110px;
}