将浮动div的文本设置为浮动并正确包装而不用硬编码div宽度？

Question

看看下面的jsfiddle：

http://jsfiddle.net/tTNNm/

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

div应该是它的内容的全宽，然后高度应该由多少内容由于它的父元素的宽度约束而需要包装到下一行来确定。那么在我的小提琴中，为什么div.text采用完整的300px宽度并强制自己到下一行而不是在图像的div旁边拟合，计算宽度为200px？

参考：

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

Answer 1

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

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

Answer 2

This code将使文本不会环绕图像，但只需“调整”div的大小以适应（假设100px宽图像）。

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