CSS에서 100 %의 1/3을 표현하는 가장 좋은 방법은 무엇입니까?

Question

나는 <div>의 내부에 세 개의 작은 <div> 인라인이 있습니다. 각각 33 % 너비가 있지만 3 * 33 %! = 100 %이므로 정렬 문제가 발생합니다. 이런 식으로 CSS에서 완벽한 3 분의 1을 표현하는 가장 좋은 방법은 무엇입니까? 어쩌면 33.33 %입니까?

Answer 1

여백에 대한 여유는 있습니까? 가운데 열의 5 % 여백과 함께 열당 30 %를 이동할 수 있습니다.

Quick example

Answer 2

가장 높은 화면 해상도는 2800x2100의 해상도를 가진 a non-production NEC LCD screen입니다. 이 크기에서도 한 픽셀은 화면 너비의 0.0357 %입니다. 그러므로 33.33%은 5,000 픽셀의 스크린이 표준이 될 때까지 충분히 근접해야합니다.

John Resig did some research 다른 브라우저에서 반올림하지만 세 열에 따라 정확히 일치하면 화면의 너비가 완벽한 솔루션을 제공하지 못할 수 있습니다.

#myDiv { 
    width: calc(100% /3); 
} 

또는 브라우저를 지원하지 않는다면 당신은 대체로 사용할 수 있습니다 : : 이제

Answer 3

calc은 최신 브라우저들 widely supported 것을, 당신은 사용할 수 있습니다

#myDivWithFallback { 
    width: 33.33%; 
    width: calc(100%/3); 
} 

Answer 4

.col_1_3 { 
    width: 33%; 
    float: left; 
} 

.col_1_3:nth-of-type(even) { 
    width: 34%; 
}