하나의 div 플로트가 남았습니다. 두 div가 HTML5에서 오른쪽으로 떠있었습니다.

Question

여기에 해결책이 있습니다 ... how to float two divs beside one div? ... div 순서를 B, C, A (http://jsfiddle.net/4Jpts/3/ 참조)로 변경하면 중단됩니다.

내 설정 :

<div id="page"> 
    <header></header> 
    <nav></nav> 
    <section></section> 
</div> 

헤더 및 탐색 잘 서로 아래에 떠 있어야이 절 왼쪽, float를해야한다.

또한 HTML5 태그 주위에 div를 추가하지 않는 것이 좋습니다.

현재이 문제를 해결하기 위해 노력하고 있지만 누구에게도 의견이 있으면 궁금하십니까?

감사합니다,

스티브

Answer 1

http://jsfiddle.net/4Jpts/9/

내가 근본적으로했던 것은 divA에서 왼쪽 플로트를 삭제하고 divC의 오른쪽에 있던 것을 지우는 것이 었습니다.

Answer 2

당신은 < BR에게 > 태그를 입력 같은 몇 가지 선택이있을 수 있습니다. 하지만 다른 div에서 세 번째 div를 래핑하는 것이 가장 좋은 방법이며, 모든 브라우저에서 제대로 작동합니다.

#mainContainer{ overflow:hidden; } 
#divA{ float:left; width:60%; background:red; height:500px; } 
#divB{ float:right; width:35%; background:yellow; height:200px; margin-bottom:20px} 
#divC{ float:right; width:35%; background:blue; height:100px } 


<div id="mainContainer"> 
    <div id="divB"></div> 
    <div id="divC"></div> 
    <div> 
    <div id="divA"></div> 
    </div> 
</div> 

나는 선택을 많이 사용하지만, 용기에 포장하는 것은 당신이 어떤 브라우저 나 아직 해제 브라우저의 최신 버전에 모양에서 얻을 수없는 믿을 수있는 뭔가가있다.

단지

<div id="mainContainer"> 
    <div id="divA"></div> 
    <div id="divB"></div> 
    <div id="divC"></div> 
</div> 

을 (현재 CSS를 사용하여)처럼하지만 당신은 단지 배치 그것을 갖고 싶어 내 바이올린을 확인하기 위해 탐색, 섹션 헤더를 다시 정렬하지 왜

Answer 3

나는 당신이 성취하고자하는 것에 대한 올바른 이미지를 얻길 바랍니다. http://jsfiddle.net/4Jpts/10/

<div id="mainContainer"> 
<div id="divA"></div> 
<div id="divB"></div> 
<div id="divC"></div> 
</div> 

맑음을 사용해야합니다.

#mainContainer { 
overflow:hidden; 
} 

#divA { 
float:right; 
width:60%; 
background:red; 
height:500px; 
} 

#divB { 
float:right; 
width:35%; 
background:yellow; 
height:200px; 
margin-bottom:20px; 
clear:right; 
} 

#divC { 
float:left; 
width:35%; 
background:blue; 
height:100px; 
clear:both; 
}