html - 将 float div 的文本设置为 float 并正确换行而不硬编码 div 宽度？

Question

看看下面的 jsfiddle:

http://jsfiddle.net/tTNNm/

如果不在 CSS 中硬编码 div.text 的宽度，如何让 div.text float 在图像 div 旁边？

一个 div 应该是它的内容的全宽，然后由于其父元素的宽度限制，高度应该由有多少内容需要换行到下一行来确定。所以在我的 fiddle 中，为什么 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;
}

Answer 1

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

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