HTML縦線の区切り

Question

私はそうのような水平線の区切り作成：

/* line separator */ 
 
    .aSeparator { 
 
    border-top:1px solid #5f656d; 
 
    height:1px; 
 
    margin:16px 0; 
 
    }

<div class="aSeparator"></div>

をここでそれを見る：https://jsfiddle.net/xjna71pn/

を、それは、ウィンドウの長さのままので、それはクールだマイナスパディング

私の質問は、どのように私は垂直なものを作成できますか？

明らかに、border-leftを試しましたが、うまくいかなかったようです。

Answer 1

境界線は左になりますが、より高い高さ（現在は1pxに設定されています）を指定する必要があります。

Answer 2

特定の高さを設定する必要があります。あなたの縦のセパレータのCSSは次のように次のようになります。それは、親の全体の高さを占めるようにするには

.aVerticalSeparator { 
    border-left: 1px solid #5f656d; /* Border on the left */ 
    width: 1px; /* Width instead of height */ 
    height: 200px; 
} 

、あなたは100%にその高さを設定する必要がありますが、親要素の高さを持っている必要があります。

Here's a demo単純なhtml文書では、ルート要素（htmlおよびbody）の高さが特定の高さに設定されているため、セパレータで100％まで塗りつぶすことができます。

Answer 3

これは私が実装まさにです：

.vertLine { 
    border-right:1px #ff0000; /* line 1 pixel width, length of "Some content" */ 
} 

他の人が提案したものと若干異なるが、正確である：

HTMLで

：CSSで

<div class="vertLine"> 
    /* Some content, you want to the left of the vertical line.*/ 
</div> 

私が探していたもの。

高さと長さを指定する必要はありません。これは、コンテンツの中身の高さにすぎません。例えば。 100pxのイメージを置くと、その行は100pxの右側に表示されます。