Blueprint CSS 프레임 워크 또는 모든 그리드 시스템 : 테두리가있는 div에 대한 수정

Question

내 사이트를 배치하는 동안 몇 가지 문제가 있습니다. Blueprint Framework을 사용하고 있는데 내 div에 테두리를 적용 할 때 발생합니다. (나는 960gs에서 발견 또는 grid-xx) 자신의 폭이 span-XX에 의해 제어되기 때문에, 순간 나는 어떤 div 요소에 테두리를 적용 나는이 이미지에서 볼 수 있듯이이 그리드의 외출이 Click to zoom Click to zoom

그 문제를 해결할 수있는 유일한 방법은 요소의 너비를 변경하는 것이지만 프레임 워크의 그리드 용도가 끝나기 때문에 더 이상 span-XX 클래스가 없기 때문입니다. 그것을 고칠 수있는 다른 방법이 있습니까?

Answer 1

내가 올바르게 이해하면 span-24 또는 이와 비슷한 것이 있으며 테두리를 추가하고 싶습니다. 맞습니까? 그 일을 내 선호하는 방법은

<div class="span-24"> 
    <div class="box">here</div> 
</div> 

이며, 위의 코드에 대한 box 클래스에 테두리를 추가.

Answer 2

div를 중첩하지 않으려면 테두리가있는 열에 대해 몇 가지 추가 클래스를 만들 수 있습니다. 모든 열 (. 청사진에 예를 들어 24)에 걸쳐 div의 주위에 경계선을 원하는 경우 하나 이상이 있어야합니다

.with-border-first { 
    border: 1px solid red; 
    margin-right: 8px; 
} 

.with-border { 
    border: 1px solid red; 
    margin-left: -1px; 
    margin-right: 9px; 
} 

.with-border-last { 
    border: 1px solid red; 
    margin-left: -2px; 
} 

: 나는 1 픽셀의 테두리를 사용하고, 그래서 같은 클래스를 만들었습니다.

I은 ​​예를 들면, 스팬과 함께 그 클래스를 사용 둘째

<div class="span-8 with-border-first"> 
... 
</div> 

<div class="span-8 with-border"> 
... 
</div> 

<div class="span-8 last with-border-last"> 
... 
</div>