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