CSS에는 왼쪽 div 아래의 오른쪽에 div가 있습니다. Divs는 HTML로 역순입니다.

Question

설명이 혼란 스럽지만 두 개의 div가 있습니다. 한 페이지는 페이지 왼쪽에 있으며 한 개는 수레를 통해 오른쪽에 있습니다. 오른쪽에있는 것은 HTML에서 첫 번째이고, 왼쪽에있는 것은 두 번째입니다. 기본적으로, 나는 왼쪽 div가 꼭대기에 앉아서 오른쪽 div가 그 아래에 있도록 그것을 갖고 싶습니다. 왼쪽과 오른쪽이 HTML에서 순서가 맞으면, 수레를 제거하는 것만 큼 간단합니다. 그러나, 이것이 사실이 아니기 때문에, 나는 약간의 손이 필요하다. 당신이 height 및 요소의 width, 그것은 margin 가능 알고있는 경우 http://jsfiddle.net/7bTjj/

Answer 1

뒤로 절대 위치 지정을 사용해야합니다. 이제 레이아웃 관리를 위해 만들어진 CSS3 속성을 사용하여이 문제를 해결할 수 있습니다. '

(단지 편의상 -webkit 공급 업체 접두사)

.container, .left, .right { 
    display:-webkit-box; 
    -webkit-box-orient: vertical; 
} 

.left { 
    -webkit-box-ordinal-group: 1; 
} 

.right { 
    -webkit-box-ordinal-group: 2; 
} 

당신 때문에 :

사용 display:box 및 box-ordinal-group 속성은 모든 수레를 사용하지 않고, 당신이 원하는대로 순서대로 .container의 내용을 표시합니다 모바일 타겟팅, IE의 지원 부족은 문제가되지 않습니다.

Here's my fork of your fiddle.

Isotoma는 내가 CSS를 조정하는 동안 참조한 nice, readable introduction to flexbox을 가지고 있습니다.

Answer 2

: 여기에 내가 설치 가지고 jsfiddle입니다.

Demo

그렇지 않으면

.left { 
    height:20px; 
    width:70%; 
    float:left; 
    margin-left:-30%; 
} 

.right { 
    width:30%; 
    float:left; 
    margin-top:20px; 
} 

, 자바 스크립트가 필요할 수 있습니다. 다음은 similar question입니다.