3 열 유체 CSS

Question

프로토 타입 모바일 웹 응용 프로그램을 구축 중이며 css를 사용하여 3 개의 유체를 "동등한"열로 만들려고합니다. 두 열에 33 %, 마지막 열에 34 %를 사용할 수 있다고 가정했습니다. . 그러나 이것은 100 %와 같지 않습니다 ... 어떤 아이디어?

/* basic reset */ 
*, html, body { 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

html, body, #container { 
    width: 100%; 
    height: 100%; 
} 

/* layout */ 
#container { 
    background-color: red; 
} 

.column_one, .column_two { 
    float: left; 
    width: 33%; 
    background-color: lime; 
} 

.column_three { 
    float: left; 
    width: 34%; 
    background-color: aqua; 
} 

기본 수학은 그러나 33 + 33 + 34 = 100 크롬 (데스크탑)와 사파리 (아이폰 4 iOS5를)에서 좀 컨테이너 div의 배경색을 통해 버려지 있음을 알려줍니다.

파이어 폭스가 올바르게 렌더링 할 수 있기 때문에 웹킷의 버그 인 것 같습니다.

누구든지 해결책을 추천 할 수 있습니까? 아니면이 문제가 발생하는 다른 사람이 있습니까?

Answer 1

column_three를 오른쪽으로 만듭니다. 그것은이 문제를 해결하는 것으로 보인다.

.column_three { 
    float: right; 
    width: 34%; 
    background-color: aqua; 
} 

, BTW 매우 흥미로운 참고, 나는이 몇 번 한 적이 있지만 결코 내가 시간의 파이어 폭스 가장 많이 사용하는 아마 때문에, 작은 차이를 발견하지 않습니다.