css - 高さ 100% の列仕切りの作り方

Question

メイン コンテンツとサイドバーの基本的な設定を確認すると、その間に細い線が表示されます。純粋なcssで作成する方法はありますか?

<row>
<div span6>
<div span1 divider>
<div span5>
</row>

その仕切りは 1 本の細い線で、高さは 100% になりますか? jqueryで高さを設定するか、単にスキップできることは知っていますが、疑問に思っています...

Answer 1

私の意見 - border-leftを使用するための ( .rowの)高さが固定されていない場合、背景画像を繰り返し使用する可能性しかありません。(いくつかのドットと.rowの繰り返し-y )

Answer 2

私もこれに対する解決策を探していました。「column-count」で実装できるソリューションが必要で、次のことを思いつきました。

コンテナーに背景(1px x 4px、高さは好きなだけ大きくても小さくてもかまいません (1px で動作)) を追加しただけです。

私のコンテナコード（例:)

<div class="column-two">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris bibendum tortor sit amet ultricies ornare. Integer eu interdum augue. Pellentesque quis semper neque. Duis enim nisl, posuere in sollicitudin id, euismod vel neque. Quisque id nisi cursus, laoreet ante ut, faucibus eros. Mauris orci massa, vestibulum at ante a, semper luctus nunc. Phasellus vel nisi condimentum, congue enim et, auctor elit. Vestibulum libero neque, aliquet eget dapibus quis, ullamcorper a orci.</p>

</div>

私のコンテナに適用されたCSS：

div.column-two {
-moz-column-count: 2;
-moz-column-gap: 30px;
-webkit-column-count: 2;
-webkit-column-gap: 30px;
background:url('images/div-2column.png') center top repeat-y;
}

これにより、2 列の表示が作成され、背景画像によって視覚的な垂直方向の分割が作成されます。私のためにトリックを行います！:)

コード

(同じ高さの列を確保するために、以下も追加しました。以下は、最初の段落からパディングを削除します)

div.column-two p:first-of-type { margin-top:0; }

古い IE ブラウザーは、1 列表示にフォールバックすることに注意してください。これらの特定のブラウザーを「background:none」でターゲットにすると、背景が 1 列の段落の途中に表示されなくなります。