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