두 번째 떠 다니는 div를 첫 번째 떠 다니는 div 위에 올리는 방법?

Question

나는 래퍼에 두 개의 떠 다니는 div가 있습니다. 그들은 left과 right입니다. 나는 오른쪽 div가 첫 번째 div의 상단에 나타나도록하고 싶었다. 첫 번째와 왼쪽은 두 번째 와야합니다.

여기에 내가 바로 사업부에 대한 폭과 동일한 100 %를 찾고 있어요

#left{ 
    float:right; 
    } 
#right{ 
    float:left; 
    width:100%; 
} 
#wrapper{ 
    width:100px; 
    background-color: #000fff; 
} 

코드

<div id="wrapper"> 
    <div id="left"> 
     left 
    </div> 
    <div id="right"> 
     right 
    </div> 
</div> 

CSS입니다. 이것은 마크 업을 바꾸지 않고 CSS만으로 변경을 가할 수 있습니까?

JSFIDDLE

는 내가 바로 DIV 상단에 있어야하고 그 후 하단해야 좌측 할 편집했다. 오른쪽 div에 position absolute를 사용하면 왼쪽 div가 숨겨집니다. JSFIDDLE. 이

Answer 1

당신은 #right에서 float:left 속성을 제거, 왼쪽하기 전에 올바른 div를 배치합니다. 당신이 바로 위 DIV왼쪽을 원하는 경우에

Fiddle

, 당신은 플로트를 지우기의 absolute position

Answer 2

를 사용하여 다음과 같은 CSS를 같이해야 :

#left{ 
    float:right; 
    border: 1px solid black; 
    } 
#right{ 
    float:left; 
    position: absolute; 
    top: 0px; 
} 
#wrapper{ 
    width:100px; 
    background-color: #000fff; 
} 

Answer 3

첫째을 사용할 필요가 다음에 부모 "래퍼"와 position:absolute;에 position:relative 설정 오른쪽 div.

체크 아웃 this fiddle

Answer 4

당신이 단지 CSS를 사용하여이 작업을 수행 할 경우에 당신은 절대 위치를 사용해야합니다. 그러나 각 요소의 높이와 정확한 요소 수를 알고있는 경우에만 해당됩니다. 이것을 확인하십시오 fiddle.

각 요소의 높이가 20px라고 가정하면 top: 0px에 두 번째로 넣고 두 번째 숫자는 top:20px입니다. 평소 상대적인 방법처럼 잔재 공간을 사용하려면 래퍼에 대한 절대 위치 지정이있는 요소의 전체 높이에 패딩 같음을 추가해야합니다.

또는 JavaScript를 사용하여 html로 주문을 변경할 수 있습니다.

Answer 5

나는 지금까지 답변으로 확신하지 못했습니다. 나는 '절대'심지어 자바 스크립트를 피하는 것이 좋습니다 것입니다. 또한 모든 브라우저에 친숙하게하려면 높이와 같은 것을 지정해야합니다. 디자인이 거대한 해킹 (IE5.5와 파이어 폭스 등에서 몇 년 전부터 해왔음)없이 모든 최신 브라우저에서 작동 할 수 없다는 일반적인 오해입니다. 일반적으로 CSS가 적절하게 형성되고 유효하지 않기 때문입니다.이제 다음을 시도해보십시오 :

#left, #right {position:relative; float:left; height:30px; color:white; width:inherit; } 

#left{ 
background-color:blue; 
margin-top:30px; 
} 
#right{ 
background-color:green; 
margin-left:-100%; 
margin-top:0; 
} 
#wrapper{ 
width:100px; 
background-color: #000fff; 
}