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

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

---

나는 그 안에 <div>작은 세 개가있는 큰 <div>것을 인라인으로 가지고 있습니다. 각각 너비가 33 %이지만 3 * 33 %! = 100 %이기 때문에 정렬 문제가 발생합니다. 이와 같은 CSS에서 완벽한 1/3을 나타내는 가장 좋은 방법은 무엇입니까? 33.33 % 만?

---

이제이 calc되어 광범위하게 지원 최신 브라우저들 사이에서, 당신은 사용할 수 있습니다 :

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

또는 브라우저에서 지원하지 않는 경우이를 대체 수단으로 사용할 수 있습니다.

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

---

마진을 허용하고 있습니까? 중앙 열의 양쪽에 5 % 여백을두고 열당 30 %를 이동할 수 있습니다.

빠른 예

---

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

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

---

가장 높은 해상도 화면은 해상도가 2800x2100 인 비 생산 NEC LCD 화면 입니다. 이 크기에서도 1 픽셀은 화면 너비의 0.0357 %입니다. 따라서 33.33%5,000 픽셀 너비의 화면이 표준이 될 때까지 충분히 가까워 야합니다.

John Resig는 여러 브라우저에서 하위 픽셀 반올림에 대한 연구 를 일부 수행 했으므로 화면 너비와 정확히 일치 하기 위해 세 개의 열에 따라 완벽한 솔루션이 없을 수도 있습니다.

참고 URL : https://stackoverflow.com/questions/5158735/best-way-to-represent-1-3rd-of-100-in-css