CSS : 너비 (백분율) 및 백분율

Question

컨테이너의 너비를 백분율로 정의했습니다. 테두리 너비가 px 인 동안 컨테이너 너비가 %이므로 테두리 (3px 너비의 오른쪽에)를 추가하고 싶습니다. 어떻게 컨테이너의 너비를 조정할 수 있습니까?

<div class="wrap"> 
    <div class="left">...</div> 
    <div class="right">...</div> 
</div> 

.wrap{ 
    width:100%; 
} 

.left{ 
    width:30%; 
} 

.right{ 
    width:70%; 
} 

.left의 오른쪽에 3px 테두리를 추가하고 싶습니다. 예를 들어 :

나는 %에 폭을 정의하기 때문에

.left{ 
    width:30%; 
    border:3px solid #000; 
} 

는 .left의 폭을 재조정하는 가장 좋은 방법은 무엇입니까. 대략 29 %까지 너비를 줄일 수 있지만 정확하게하고 싶습니다. 조금 까다로운하지만가는 길에이 게시물을 확인

는

Answer 1

사용 box-sizing: border-box 속성입니다. 패딩과 테두리를 요소의 전체 너비의 일부로 처리하기 위해 상자 모델의 동작을 수정합니다 (여백이 아님). 즉, 요소의 너비 또는 높이가 인 경우 패딩 및 테두리에 대해 치수가 설정됩니다. 귀하의 경우, 그것은 요소의 너비와 그것의 국경의 너비가 사용 가능한 공간의 30 %를 소모합니다 것을 의미합니다.

.left { 
    width: 30%; 
    border: 3px solid #000; 

    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
} 

상세 정보 MDN와 Quirksmode 온 찾을 수 있습니다 그것을 위해

지원이 완벽하지 않다, 그러나 공급 업체 접두사는 대부분의 경우 모든 최신 브라우저를 잡을 것입니다. (-moz-, -webkit- 및 -ms-) 위의 3 벤더 접두사를 사용하여

According to Quirksmode

는, 당신은 모든 브라우저, 심지어는 IE8에 대한 지원을받을.

Answer 2

주위 얻을 :

• Percentage Plus Pixel Sizing (및 Example)
• Box Sizing on CSS-Tricks (및 Example)

box-sizing 속성이 있습니다 또한 관심을 가질 만한지 확인해보십시오.

,
• How do I add 1px border to a div whose width is a percentage?

Answer 3

가장 쉬운 크로스 브라우저 방식은 바깥 쪽 div에 테두리를 설정하지 않고 대신 .left 안에있는 새 div에 설정하는 것입니다. 간단하고 잘 작동합니다. 비율이 할 무슨

Answer 4

그냥