浮点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