如何製作100％高度的列分隔線

確定主要內容和側邊欄的基本設置，它們之間應該有細線。有沒有辦法讓它在純CSS？如何製作100％高度的列分隔線

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

因此，分隔線將是一條細線，它會有100％的高度？我知道我可以設置高度的jQuery或跳過它，但只是想知道...

來源

2012-05-05 client

在解決您的問題的相關部分（在右邊）沒有什麼？ – PeeHaa

從來沒有聽說過''元素。另外，細線如何具有100％的高度？那是什麼意思？ – kapa

首先製作正確的HTML，你現在所擁有的不是HTML。 – KBN

我的意見 - 如果沒有使用固定高度（的.row）左邊框只存在使用重複的背景圖像的可能性。（有些個點，.row重複-Y）

來源

2012-05-05 16:57:41

現在它只是divs，懶排字。我的意思是有三個div，中間的那個應該是高度相等的左側或右側列，這是最長的 – client

我一直在尋找一個解決了這一點。我需要一個解決方案，可以用「列數」來實現，並提出以下建議。

我只是加入了背景（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瀏覽器將回退到單列顯示。以「background：none」爲目標定位這些特定的瀏覽器將確保背景不會顯示在單個列段的中間。

來源

2013-10-07 17:24:53 matt

如何製作100％高度的列分隔線

回答

相關問題