DIV의 한쪽면에 테두리가 있습니다.

Question

div의 오른쪽에 테두리가 필요합니다.

내가 할 :

<div class="span6" style="border-right: 2px solid #727272;"> 

것들이 내가 사업부의 상단과 하단에 실행하는 나의 경계를하고 싶습니다이다. 상단에서 5px, 하단에서 5px. 또는 div의 높이의 90 %. 어떻게해야합니까?

감사

Answer 1

가상 요소를 사용하여 테두리를 유지할 수 있습니다. 당신이 중 하나를 설정할 수 있습니다

http://cssdeck.com/labs/kyrvt8hf

div { 
    position: relative; 
} 

div:after { 
    display: block; 
    content: ''; 
    position: absolute; 
    top: 5%; 
    bottom: 5%; 
    right: 0; 
    border-right: 2px solid red; 
} 

Answer 2

내가 틀릴 수도 있지만, 난 정말이 당신이 아마 롤 할 것이라고 그렇게 할 수있는 방법이 생각하지 않습니다. 실제로 나는 세 가지 "해킹"방법을 생각했지만 세 가지 모두 높이가 가변적 인 경우 원하는 상태로 만들 수는 없습니다.

고정 된 높이로 가정하면 원하는 색상의 너비가 2 픽셀이고 높이가 90 % 인 이미지를 만들고 div의 배경 이미지로 설정할 수 있습니다. 같은 뭔가 :

.span6 { background: #fff url(bgBorder.png) no-repeat right center; } 

업데이트

Tyblitz이 코멘트에 말에 따라 변형. 이것은 동적 높이를 허용합니다. 난 아직도 갈 의향이 오전 : 옵션 후에, 그것은 당신의 DOM 청소기를 유지으로하지만 경우에 그 수 없습니다 :

http://jsfiddle.net/designingsean/bsbgX/1/

HTML :

<div class="span6">The content div<div class="border"></div></div> 

CSS :

.span6 { 
    width:50%; 
    height:400px; 
    background-color:#ddd; 
    position:relative; 
    padding:10px; 
} 
.border { 
    width:2px; 
    background-color:#222; 
    position:absolute; 
    top:5%; 
    bottom:5%; 
    right:0; 
} 

고정 된 거리 (예 : 픽셀)로 만들려면 상단 및 하단을 백분율에서 원하는 픽셀로 변경하십시오. 예제는 http://jsfiddle.net/designingsean/bsbgX/2/을 참조하십시오.

Answer 3

이 그림 쇼의 방법 국경의 작업 : 다음은 "테두리"부모 요소의 높이의 90 %를 만들 것 다음 테두리를 축소하거나 테두리를 확장하기 위해 여백을 설정할 수 있습니다. 현재 CSS에는 테두리를 지정하고 더 크게 또는 더 작게 만들 수있는 옵션이 없습니다 (폭을 분명히 말하지 않고). 그러나 패딩, 여백, 다른 div 또는 의사 요소를 사용하여 원하는 효과를 얻을 수 있습니다.