CSS : 부모의 너비에 맞게 어린이들을 만드는 방법

Question

data-value 속성에 따라 자바 스크립트에서 너비를 계산하는 div 자식 요소의 수를 가진 부모 요소를 만듭니다.

모든 어린이의 계산 된 너비를 요약하면 100 %가됩니다. 그러나 어떤 이유에서 아이들은 실제로 부모의 너비의 100 %를 차지하지 않을 것입니다 : 마지막 픽셀 바로 뒤에 하얀색 픽셀의 일부가 나타납니다. 나는 (아래 이미지 참조) 사파리와 오페라에서이 문제에 직면,

http://jsfiddle.net/tqVUy/42/가 크롬과 파이어 폭스 괜찮 그것을 렌더링 :

이

이 방법을 보여줍니다 바이올린입니다. 예상대로 아이들 요소 div (다시 만 사파리와 오페라 관련) 부모를 중복으로

그 외에, overflow 속성은 작동하지 않습니다.

질문 :

1. 어린이에게 적합 부모를 만들기 위해 다른 (오른쪽) 방법이 있나요?
2. 모서리에 둥근 모서리와 overflow: hidden을 넣어도 모든 브라우저에서 동일하게 보이게 할 수 있습니까?

Answer 1

추가 CSS : JS에서

#component>div{height:100%;} 
#component>div:first-of-type{border-radius:30px 0 0 30px;} 
#component>div:last-of-type{border-radius: 30px;} 

편집 :

$('#component').children().not(':last').each(function() { 

어떻게됩니까 :
마지막 사업부는 부유하지 않습니다를 왼쪽, 그리고 남은 공간을 채울 것입니다. 코너 문제를 해결하기 위해 첫 번째와 마지막 div에 둥근 모서리를 추가했습니다. 사업부 다른 div의 뒤에 actualy 때문에 마지막 사업부는, 모든 모서리에 30 픽셀의 반경

데모 (당신은이 요소를 검사로 볼 수 있습니다) : http://jsfiddle.net/tqVUy/48/

Answer 2

나는 또한 이런 종류의 문제에 직면 해있다. 그래서 국경 반경도 자녀에게 정의하십시오. 다음과 같이 쓰기 :

#component > div:first-child{ 
    border-radius:30px 0 0 30px; 
} 
#component > div:last-child{ 
    border-radius:0 30px 30px 0; 
} 

확인이 http://jsfiddle.net/tqVUy/49/