2

コンテナの右側に表示したい固定幅の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/

4

1 に答える 1

5

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 の例

于 2013-04-14T19:59:21.060 に答える