html - 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 示例