이 div가 겹치지 않게하려면 어떻게해야합니까?

Question

콘텐츠 div 내에 세 개의 div가 있습니다.

컨테이너 폭 70 %. 내 안에 - 왼쪽, 너비 20 %. - 콘텐트, 너비 60 %. - 오른쪽, 너비 20 %.

컨테이너의 20 %, 60 % 및 20 %를 차지할 수 있도록 페이지의 너비의 70 %, 내부의 너비 (왼쪽, 내용 및 오른쪽)를 차지하게하십시오.

저는 여기에서 다른 질문을 시도했지만 Google을 사용해 보았지만 올바른 대답을 찾을 수 없습니다. 겹치지 않게 도와주세요.

하지만 브라우저, div의 중복을 크기를 다시 할 때.

가 여기에 관련 CSS 코드입니다 :이처럼

#container{ 
    width: 70%; 
} 
#left { 
    float: left; 
    width: 20%; 
    min-width: 200px; 
} 
#content { 
    float: left; 
    width: 60%; 
    min-width: 600px; 
} 
#right { 
    float: right; 
    width: 20%; 
    min-width: 200px; 
} 

Answer 1

CSS에서 min-width 만 제거하면됩니다. 그리고 min-width을 margin: auto으로 용기에 넣고 중앙에 놓습니다. 여기

#container{ 
    width: 70%; 
    min-width: 1000px; 
    margin: auto; 
} 
#left { 
    float: left; 
    width: 20%; 
} 
#content { 
    float: left; 
    width: 60%; 
} 
#right { 
    float: right; 
    width: 20%; 
} 

체크 아웃 바이올린 :

이 CSS 시도, 당신은 최소 폭을 원한다면 여기 http://jsfiddle.net/UaqU7/2/

Answer 2

은 최소 폭의 CSS를 꺼냅니다.

일단 창 너비가 특정 크기보다 작아지면 해당 요소는 겹칠 수밖에 없습니다. 창 크기가 1000 픽셀이라고 가정 해 보겠습니다. 컨테이너는 700px가됩니다. 그러나 최소 너비로 컨테이너의 div는 이미 1000px로 컨테이너를 오버플로합니다.

Answer 3

CSS에서 min-width을 추출해야합니다.

페이지의 크기가 작을 때 min-width은 더 이상 축소되지 않도록합니다. 따라서 오버랩이 발생합니다.

Answer 4

하면, 이동을 컨테이너

http://jsfiddle.net/VBSYu/1/

#container{ 
    width: 70%; 
    min-width: 1000px; 
} 
#left { 
    float: left; 
    width: 20%; 
} 
#content { 
    float: left; 
    width: 60%; 
} 
#right { 
    float: right; 
    width: 20%; 
}​ 

에 설정

Answer 5

대신에 m 아동용 DIV의 너비가 인 경우 #container에게 줄 수 있습니다. 다음과 같이 쓰기 :

#container{ 
    width: 70%; 
    min-width:1000px; 
} 
#left { 
    float: left; 
    width: 20%; 
} 
#content { 
    float: left; 
    width: 60%; 
} 
#right { 
    float: right; 
    width: 20%; 
} 

확인 다음은이 http://jsfiddle.net/yLVsb/

Answer 6

이 잘 http://jsfiddle.net/r42hH/2/