css가 부동 div를 세로로 쌓음

Question

오른쪽 플로트 div를 항상 '서로 쌓아 올릴 수 있습니까?

> ---------------------------------+ 
> |Container div   | div1| 
> |Fixed width    +--+----+ 
> |       |div2| 
> |      +----+----+ 
> |      |  div3| 
> |      +---------+ 
> |        | 
> +--------------------------------+ 

Div1, 2, 3은 가변 폭과 높이입니다

예를 들어 나는 이런 식으로 뭔가를 시도하고있다. 만약 내가 그걸 제대로 띄우면, 그것들은 항상 그런 식으로 겹쳐지지 않을 것입니다. div2는 div1의 왼쪽에 배치 될 것입니다. 왜냐하면 레이아웃이 컨테이너의 높이를 최소화하려고하기 때문입니다. 나는 그들이 항상 서로 쌓기를 바란다.

Answer 1

이 CSS 규칙 float: none에 div1, div2, div3을 설정하는 동안 및

.div1, .div2, .div3{ 
    float: right; 
    clear: right; 
} 

쌓아

example fiddle을 참조하십시오.

스크린 샷

소스

.div1, .div2, .div3{ 
    float:right; 
    clear:right; 
} 
.div2{ 
    background-color:green; 
    width: 300px; 
    height: 20px; 
} 
.div1{ 
    background-color:blue; 
    width: 100px; 
    height: 30px; 
} 
.div3{ 
    background-color:red; 
    width: 80px; 
    height: 40px; 
} 

.container{ 
    background-color: gray; 
    width: 400px; 
    height: 400px; 
} 

Answer 2

은 div1, div2, div3 주위에 DIV 래퍼를 넣고 래퍼 플로트하자 바로 정렬에 넣어해야 display: block 및