% 열 수에 따른 백분율의 나누기

Question

막 대형 차트의 스타일을 지정 중입니다. 이 무제한 바는 잠재적이고 나는 현재 내가 좋아하는 뭔가가 그들 각각의 부모 컨테이너 -에 비례 폭이 필요합니다 : 나는 각 막대에 추가 할 수

.one-column { 
    width: (100%/1); 
} 

.two-columns { 
    width: (100%/2); 
} 

.three-columns { 
    width: (100%/3); 
} 

etc 

을 ....

누구나이 문제를 해결하고 무제한 열을 처리 할 수있는 하나의 규칙을 가질 수있는 영리한 방법을 생각해 낼 수 있습니까? 데이터 속성과 관련이있을 수 있습니까?

Answer 1

:

div:first-child:last-child { 
width: 100%; 
} 
div:first-child:nth-last-child(2), div:last-child:nth-first-child(2) { 
width: 50%; 
} 
div:first-child:nth-last-child(3), div:first-child:nth-last-child(3) ~ div { 
width: 33.33%; 
} 
div:first-child:nth-last-child(4), div:first-child:nth-last-child(4) ~ div { 
width: 25%; 
} 

당신이 볼 수 있듯이, 당신은 여전히 ​​추가해야합니다 가능한 모든 div 수에 대한 규칙이지만, 더 많은 div가 있는지 여부를 더 이상 감지하고 그에 따라 클래스를 설정할 필요가 없습니다.

하지만 또 다른 가능한 해결책이 있습니다. div32 및 부모 요소에 display: table, display: table-cell 등을 적절하게 사용할 수 있습니다. 그런 다음 상위 항목의 너비를 100%으로 설정하고 컨테이너 너비를 모두 같은 값 (예 : 1%)으로 설정하면 원하는 내용을 정확하게 얻을 수 있습니다.

Answer 2

LessCSS을보세요. 수학 연산을 지원합니다. 그렇지 않으면 Javascript를 사용하여 막대의 스타일링을 처리하는 것이 좋습니다. 아마도 Raphael과 같은 그래프 라이브러리를 사용 하시겠습니까? 당신이 그 스타일에 의존하고를 사용 컨테이너의 폭이 얼마나 많은 열을 찾을 수 CSS3 셀렉터의 일부 까다로운 조합