html - div 的 float 内容

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