수직 div 간격

최소한의 코드로 3 개의 div를 어떻게 수평 적으로 배포합니까?수직 div 간격

같은 클래스를 가진 3 개의 div가 있는데, 각 div 사이에 19 픽셀의 간격으로 가로로 분산해야합니다.

제 해결책은 현재 첫 번째 2 div에 19 픽셀의 오른쪽 여백을 지정하고 세 번째 div에 19 픽셀의 왼쪽 여백을주는 별도의 클래스를 지정하는 것입니다.

이렇게하면 작업이 완료되지만 더 좋은 방법이있는 것처럼 느껴집니다. 이상적으로 모든 세 div는 여전히 같은 클래스를 유지합니다.

2011-08-16 sheepgobeep

참조하십시오 adjacent sibling combinator를 사용이 http://jsfiddle.net/thirtydot/q6Hj8/

.yourDivClass + .yourDivClass { 
    margin-left: 19px 
}

.yourDivClass 앞에는 모든 .yourDivClass에 margin-left을 적용하는 - 즉, 모든 처음을 제외하고.

출처

2011-08-16 14:41:22 thirtydot

감사합니다! 그 일은 훌륭했습니다. CSS 선택기를 처음 접했을 때입니다. 브라우저 전반에서 호환성/지원 문제가 있습니까? – sheepgobeep

반갑습니다. '+'는 고대의 IE6를 제외한 모든 곳에서 작동합니다 (더 이상 신경 쓰지 않아야합니다). – thirtydot

오른쪽 여백이있는 두 개의 열만 있으면됩니다. 세 번째 열은 추가 여백이 필요하지 않습니다. 테두리가 추가되어 바이올린에서 볼 수 있습니다.

div.hasMargin 
{ 
    margin-right: 19px; 
} 

div.column 
{ 
    border-color: black; 
    border-style: solid; 
    border-width: 1px; 
    float: left; 
}

는 여기 fiddle

출처

2011-08-16 14:49:59 DwB

@thirtydot은 단순함으로 그것을 깎아 냈다고 생각합니다. – Sparky

이것을 사용하려면 (IE6 지원이되는 유일한 이유) 역순으로 추가하고 여러 개의 'hasMargin' 클래스 대신 하나의'noMargin' 클래스를 추가하는 것이 좋습니다. http://jsfiddle.net/ jkLAK/1 / – thirtydot

수직 div 간격

답변

관련 문제