如何将浮动div的文本文字浮动并正常换行，而不需要硬编码div宽度？

Question

请看下面这个 jsfiddle:

http://jsfiddle.net/tTNNm/

如何在不在CSS中硬编码 div.text 的宽度的情况下使其与图像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;
}

​

- Jake Wilson

Answer 1

这是因为两个 div 都继承了 float: left;。请尝试将以下内容添加到您的 CSS 中：

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

- wachpwnski

---

啊，很奇怪我必须指定 div.test div.text 而不是只有 div.text。谢谢。 - Jake Wilson

@Jakobud 你可以直接使用 div.text。CSS 会继承属性，除非被明确声明覆盖。例如：div.test div { ... } 会将该规则应用于带有 test 类的 div 内的任何 div。 - wachpwnski

现在明白了。最终，我所需要做的就是将图像 div 浮动起来，而不是去管文本 div。 - Jake Wilson

Answer 2

这段代码将使文本不会围绕图像排列，而是“调整”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;
}

- 0b10011