왜 나머지는 내 오른쪽 부동 div 인라인 부동?

Question

갤러리 페이지의 건물에 대한 내 페이지에 3 개의 div가 있습니다. 중앙에 div가 왼쪽과 오른쪽 중 어느 한쪽면에 표시되도록 중앙에 div가 있어야합니다. 왼쪽과 가운데 div는 잘 작동하고 서로 인라인되어 있지만 내 오른쪽 부동 div는 다른 쪽보다 아래쪽에 위치합니다.

왜 이런 일이 발생합니까? 당신의 CSS에서

HTML

<div id="left"> 
IM ON THE LEFT 
</div> 


<div id="middle"> 
I AM IN THE MIDDLE 
</div> 

<div id="right"> 
THIS IS ON THE RIGHT 
</div> 

CSS

#left{ 
float:left; 
position:relative; 
width: 150px; 

} 

#middle{ 
display: block; 
margin-left: auto; 
margin-right: auto; 
width: 150px; 
position: relative; 

} 


#right{ 
float:right; 
width: 150px; 
position: relative; 
} 

Answer 1

을 여기에 가능한 corection에게

#left{ 
float:left; 
position:relative; 
width: 150px; 
display: inline-block; 
} 

#middle{ 
display: block; 
margin-left: auto; 
margin-right: auto; 
width: 150px; 
position: relative; 

} 


#right{ 
float:right; 
width: 150px; 
position: relative; 
display: inline-block; 
} 

시도를 당신을 위해 오크 있는지 ...

Answer 2

.left.right

에 대한

display:inline-block; 

같은 추가

편집 : 여기

jsFiddle 작동합니다 http://jsfiddle.net/LwUqF/

Answer 3

어쩌면 더 공간이 없다 마지막 div가 떠 다니기로되어있는 곳입니다.

어쩌면 HTML의 순서를 다시 지정할 수 있으므로 오른쪽 열이 가운데 열에옵니다.

어쩌면 당신은이 작업을 수행 할 수 있습니다 #middle는 블록 레벨 요소이며 뜨지 않기 때문에

가

#left { 
    float: left; 
    width: 10%; 
} 
#center { 
    float: left; 
    width: 80%; 
} 
#right { 
    float: left; 
    width: 10%; 
} 

Answer 4

그것은 발생합니다. 이것은 새로운 라인을 생성하고, float 권한은 다음 라인에서 시작됩니다. 중간 블록을 왼쪽으로 떠있을 경우 공간이 충분하다면 잘 작동합니다. 또는 #right -div를 HTML의 맨 위에 배치 할 수 있습니다. 그러면 오른쪽으로 플로팅되고 #left은 왼쪽으로 플로팅되고 #middle은 일반 문서 플로우, 즉 여유 공간이있는 경우 중간에 머물러있게됩니다.

Answer 5

을 display:block으로 지정했기 때문에이 div가 나머지 컨테이너를 채우므로 그 아래에 #right div가 표시됩니다. #middle을 display:inline-block으로 변경하면 원하는 결과가 나타납니다. 당신은 이유를 요청

Answer 6

또는 어떤 PatrikAkerstrand 말했다 ... :

는 http://jsfiddle.net/xm33e/

편집을 참조하십시오.

이유는 다른 설명에 잘 설명되어 있습니다.아직

솔루션 :

당신은 I'llassume 있도록 총 페이지 폭과 세 div 년대의 폭의 아이디어를 가지고, 중심 위치에 div '중간'을 원한다.

'왼쪽'과 '중간'div을 div 아래에두고 왼쪽으로 띄우십시오.

'right'div은 그대로 유지됩니다.