请看下面这个 jsfiddle:
如何在不在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;
}
div.test div.text
而不是只有div.text
。谢谢。 - Jake Wilson