2 개의 960.gs 상자 사이에 수직선을 추가하는 방법은 무엇입니까?

Question

디자인에 960.gs 그리드 시스템을 사용하고 있습니다. 두 상자 사이에 얇은 분리 세로선을 추가하는 가장 좋은 방법은 무엇입니까? 너비와 색상은 조정 가능해야합니다.

내 계획은 가능한 위치마다 하나씩 절대 위치와 배경색을 가진 두 개의 div 클래스를 정의하고 JQuery를 사용하여 주변 상자와 높이가 동일한 지 확인합니다. 그래도 조금 복잡해 보입니다. 더 나은 해결책이 있습니까?

Answer 1

의사 선택기 :after과 다음과 같이 절대 위치 지정을 사용하여 경계선을 구현할 수 있습니다. 여기

.line:after { 
    border-right: 1px solid #000000; 
    content: ""; 
    display: block; 
    margin: 1px; 
    position: absolute; 
    right: -11px; 
    top: 0; 
    bottom: 0; 
} 

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 { 
    position:relative; 
} 

내가이 할-수 jQuery를하지 않고 생각 데모를 여기 http://jsfiddle.net/andresilich/ZTyf4/show/

편집 http://jsfiddle.net/andresilich/ZTyf4/

Answer 2

분리 선이 DIV의 다음 행 위치를 변경하지 못하도록하려면 절대 위치 지정이 최선의 방법이라고 생각합니다. 당신이 할 수있는 것은 절대적으로 배치 된 : after selector를 사용하여 상자의 바닥에 상대적으로 무언가를 배치하고 레이아웃에는 영향을 미치지 않는 것입니다. 나는이 문제를 이해 할 수 없습니다

#topbox:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    margin-top: 25px; 
    height: 5px; 
    width: 400px; 
    background-color: #999; 
} 

Answer 3

: 나 그냥 필요에 따라 마지막 네 가지 속성의 값을 변경, 레이아웃에 영향을주지 않고 상자 사이에 선을 배치하는이 작동합니다. 난 그냥 열 중 하나에서 오른쪽 또는 왼쪽 테두리를 사용하여 2 사이의 가운데에 있는지 확인하기 위해 패딩을 조정합니다.

Answer 4

입니다. 주요 쟁점은 요소의 가변 높이를 고려하는 것입니다. 여기

참조 : http://jsfiddle.net/uqZgt/1/

HTML :

<div class="container"> 
    <div class="box-1"> 
     This box has alot of content. This box has alot of content. This box has alot of content. 
    </div> 

    <div class="box-2"> 
     This box has a little bit of content. This box has a little bit of content. This box has a little bit of content. This box has alot of content. This box has alot of content. This box has alot of content. 
    </div> 
</div> 

CSS :이 예에서는

.container { 
    width: 242px; 
} 

.container div { 
    width: 100px; 
    background: #ff0000; 
    float: left; 
    padding: 10px; 
    border-right: 2px solid #000 
} 

.box-1 + .box-2 { 
    border-right: none; 
    border-left: 2px solid #000 
} 

.box-1 ~ .box-2 { 
    margin-left: -2px 
} 

의 .container 사업부의 모든 div의가 2 픽셀 검은 색 테두리가-권리가 있습니다. 그러나 .box-1의 요소를 직접 처리하는 클래스 box-2의 요소는 2px 검정색 테두리 왼쪽, 및 border-right를 갖습니다. 지금까지 두 요소 사이에 3px 경계를 만듭니다.

이제 .box-1 ~ .box-2은 .box-2의 바로 앞에있는 .box-1을 선택하고 여백을 왼쪽으로 -2px로 설정합니다. 이렇게하면 왼쪽으로 두 픽셀을 드래그하여 두 요소의 경계를 효과적으로 겹치게 만듭니다.

.container DIV는 두 개의 요소 (200 픽셀), 플러스 패딩 (10px의 좌우 = 20 픽셀)의 폭의 합과 동일한 폭을 더한 테두리 하나 (2 픽셀)의 폭을 갖는다. 242 픽셀이므로 두 요소가 완벽하게 맞습니다.

어떤 div가 더 많은 콘텐츠를 가지고 있더라도 테두리는 가장 많은 콘텐츠가있는 div의 높이에 걸쳐 나타납니다.