2012-03-06 5 views
1

일부 정보를 표시하는 프로필 왼쪽에 약간의 "플로팅"메뉴 유형이 있지만 모양이 좋아 보이지만 이전에 다른 PC를 사용했고 메인 페이지 본문과 겹치고있었습니다 (화면 해상도로 인해).위치가있는 화면의 CSS 백분율 :

그래서이 원래 CSS입니다 (CSS3 멋진 물건 것은 밖으로 제거) :

position: absolute; 
border: 1px solid #73a7f0; 
width: 200px; 
left:10px; 
top: 160px; 
padding: 5px 14px; 
border-radius: 4px; 

를이 내가 할 노력하고 무엇을, 변경된 라인은 다음과 같습니다

width: 10%; 

화면에 따라 어떻게 보일 수 있습니까?

감사합니다.

+0

'폭 문제의 새로운 기능 : 10 %;'? –

+0

그것은 작동하지 않습니다 : ( – Jack4

답변

4

Diodeus의 답변은 컨테이너에 정적 위치가있는 경우 true입니다. 컨테이너의 너비 세트가 퍼센티지 너비이고 컨테이너의 위치가 static (기본값)이 아닌 경우이 컨테이너는 백분율 너비의 컨텍스트로 사용합니다. 여기

바이올린 : http://jsfiddle.net/USJnN/

1

절대적으로 배치 된 요소는 더 이상 레이아웃의 일부가 아닙니다. 블록 요소에 대해 너비가 지정되면 너비는에 비례하여 입니다. 고정 크기 컨테이너가 없으면 퍼센티지는 가변적 인 브라우저 창 이외의 크기 컨텍스트를 실제로 가지지 않습니다.

픽셀 단위의 너비를 사용하면이 상황에서 필요한 것입니다.

+0

그래서 최소 모니터 값을 가정해야합니까? – Jack4

+0

"최소 너비 :"를 가질 수 있습니다. "모니터"값의 의미는 알지 못합니다. –