2012-05-05 13 views
1

メインコンテンツとサイドバーの基本設定で、その間に細い線があるはずです。純粋なCSSでそれを作る方法はありますか?100%高さのカラムディバイダを作る方法

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

分割線は1本の細い線で100%の高さになるでしょうか?私はjqueryのに高さを設定したり、それをスキップすることができます知っているが、ただ不思議...

+0

問題を解決する関連するセクション(右側)には何もありませんか? – PeeHaa

+0

''要素について聞いたことがありません。また、細い線は100%の高さを持つことができますか?どういう意味ですか? – kapa

+0

適切なHTMLをまず作成してください。あなたが今持っているものはHTMLではありません。 – KBN

答えて

0

私の意見 - (.rowの)一定の高さがのborder-leftを使用するために存在しない場合にのみ存在しています繰り返しのバックラウンド画像を使用する可能性。私も、このために決意を探していた(一部のドットと.row繰り返し-Y

+0

今すぐdivs、lazy typo。私は3つのdivがあり、その間にあるものは左または右の列と同じ高さでなければならないことを意味します – client

0

。私は "列数"で実装できる解決策が必要でしたし、次のことを考え出しました。

背景には、(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列の段落の中央に表示されなくなります。

関連する問題