이상한 사업부 배치

Question

나는 왼쪽에서 오른쪽으로 나타나고 싶었던 세 개의 DIV를 만들었습니다. 그러나

<div id="middle"> 
    <div id="middleleft"></div> 
    <div id="middleleftopenclose"></div> 
    <div id="middleright"></div> 
</div> 

, middleleftopenclose DIV 모든 방법 왼쪽이 아닌 middleleft을 한 후에 나타납니다. 왜 그런가요?

#middle { 
    position: relative; 
    height: 100%; 
} 
#middleleft { 
    width: 445px; 
    float: left; 
} 
#middleleftopenclose { 
    background-color:#2a2729; 
    position: absolute; 
    height: 100%; 
    width: 15px; 
    float: left; 
} 
#middleright { 
    height: 100%; 
    margin-left: 460px; 
} 

고마워요!

Answer 1

플로트는 position: absolute. 작동하지 않는 것은 시도 position: relative;

#middleleft { 
    width: 445px; 
    float: left; 
    position: relative; 
} 
#middleleftopenclose { 
    background-color:#2a2729; 
    position: relative; 
    height: 100%; 
    width: 15px; 
    float: left; 
} 

Answer 2

플로트를 제거하고 display : inline-block;

Answer 3

브라우저가 모든 div를 수평 적으로 수용 할 수 없기 때문입니다. 즉, div의 너비 합계가 페이지 너비보다 많기 때문입니다. div 너비를 변경해보십시오.

Answer 4

의견에서 언급했듯이 position: absolute과 float을 함께 사용할 수 없습니다. position: relative으로 변경하면 대부분 수정됩니다. 시각화하기 위해 fiddle을 만들었습니다. 좀 더 명확하게하기 위해 몇 가지 색상을 추가했으며 #middleleft을 height: 100%으로 설정했습니다. 그렇지 않으면 올바르게 플로팅되지 않습니다. 이 내용이 귀하의 사이트에 적용되는지 여부는 알 수 없습니다.

Answer 5

로 변경합니다이

#middle { width: 100% } 
#middle div { display: inline-block; width: 33%; } 

당신은 절대 상대 또는 위치 :