帶分隔符邊框的兩列

我想要有兩列帶分隔符的邊框。帶分隔符邊框的兩列

當柱子高度相同時，任務非常簡單。

但是，如果列的高度不同，並且您不知道哪個是更高的列（並且我不想使用固定值），我該如何解決問題？

背景顏色是一樣的。

純CSS解決方案是最好的。如果不可能，也可以接受JavaScript代碼。

Click here for the current example。

來源

2011-09-21 antonjs

您可以設置容器來table顯示器和左，右列table-cell

#container { 
display: table; 
    width: 100%; 
} 
#content-left { 
    border-right: 4px dotted #000; 
    width: 50%; 
    display: table-cell; 
    margin-right: -4px; 
} 
#content-right { 
    width: 50%; 
    display: table-cell; 
}

然後你只需要包裝的左側和右側列在容器中，你擁有它。

<div id="wrapper"> 
    <div id="container"> 
     <div id="content-left">left</div> 
     <div id="content-right">right<br />right<br />right</div> 
    </div> 
    <div id="footer"> 
     footer content 
    </div> 
</div>

Look Here

來源

2011-09-21 17:23:31 rlemon

當然，這是假設你不在乎支持IE7和以下...不是我說你應該在乎;） – jbyrd

誰甚至在乎支持IE8 +，我意思是認真的.. RTFD微軟。標準的制定是有原因的，如果一個主要參與者不遵守上述標準，他們就不應該接受。不，我們應該疏遠他們並拒絕參與/使用他們的產品和/或服務。除了windows .. Linux（任何發行版）還不夠強大，而我*不會購買mac * – rlemon

我建議你閱讀約faux columns。如果你負擔不起時間（不是那麼多，但是......），那麼使用JS你可以簡單地檢查哪一個更高，並設置另一個的最小高度。
我認爲這會按照你的意願工作。但我建議你改爲了解人造專欄。

來源

2011-09-21 17:13:03 ANeves

也許這樣的事情是你在找什麼：

http://jsfiddle.net/euYTQ/40/

HTML：

<div class="container"> 
    <div class="left">section left</div> 
    <div class="right">section right<br>other row</div> 
    <div class="footer">section footer</div> 
</div>

CSS：

div.container { 
    position:absolute; 
    background:#eee; 
    margin: 0 auto; 
    width: 750px; 
    height:100%; 
} 
.left{ 
    position:absolute; 
    left:0px; 
    top:0px; 
    bottom:50px; 
    width:48%; 
    border-right-style:dotted; 
} 
.right { 
    position:absolute; 
    right:0px; 
    top:0px; 
    bottom:50px; 
    width:48%; 
    border-right-style:dotted; 
} 
.footer { 
    position:absolute; 
    background: none repeat scroll 0 0; 
    bottom: 0px; 
    height:50px; 
    left:0px; 
    right:0px; 
    border-top-style:dotted; 
}

來源

2011-09-21 17:25:43

一個CSS方法是使用重複的背景圖像的虛線 - 這重複的推移周圍的2列一個div，像這樣：

http://jsfiddle.net/P5Z9s/（很明顯，你會得到一個更好的形象，我剛拔掉這從谷歌）

或者使用jQuery，你可以這樣做：

http://jsfiddle.net/ntWRY/（你基本上是相同的類添加到要均衡，一列然後調用該類的功能）

來源

2011-09-21 17:35:43 jbyrd

帶分隔符邊框的兩列

回答

相關問題