div的浮动内容

Question

我有一个固定的宽度div，我想在容器的右侧显示。在左侧，我想显示一个div，使其文本在右侧div结束后展开到右侧div下方。请看下面的图片：

这里就是我目前想：

HTML：

<div class="wrapper"> 
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu ipsum augue. </div> 
    <div class="right">float right.</div> 
</div> 

CSS：

.wrapper{ 
    overflow: hidden; 
    border: 1px solid red; 
    width: 300px; 
} 

.left{ 
    float: left; 
    width: 200px; 
    background: brown; 
} 

.right{ 
    float: right; 
    width: 100px; 
    background: green; 
} 

的jsfiddle： http://jsfiddle.net/qyrKY/

Answer 1

更改您的div以下顺序：

<div class="wrapper"> 
    <div class="right">float right.</div> 
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu ipsum augue. Nulla ac turpis sem, vitae iaculis diam. Pellentesque nisl magna, gravida tempus laoreet in, bibendum eget dolor. Morbi convallis sem faucibus turpis viverra vestibulum. Nam at urna elit, eget elementum elit. Donec pretium placerat mauris ut blandit. Phasellus sit amet est ante, quis dignissim metus. Mauris id neque ligula, sit amet convallis nunc.</div> 
</div> 

，改变你留给CSS类：

.left { 
    background: brown; 
} 

jsFiddle example