CSS 100％高度邊框顏色

我經常使用HTML/CSS創建兩個（或多個）列布局，並且需要分隔邊界。我通常將邊框添加到左側或右側列，但我需要邊框，以匹配最高列的高度。CSS 100％高度邊框顏色

我創建了一個的jsfiddle來說明這個問題：http://jsfiddle.net/rxGUS/

在此先感謝。

2012-05-23 Martin

從Alex的回答中考慮，將Twitter Bootstrap的CSS考慮在內。由於兩列之間的間隔應該是20px（來自margin-left:20px;），所以我添加了將它設置爲邊框兩側的10px。如果您需要20px，只需將padding-left設置爲.column2，將padding-right設置爲.column1至20px即可。

.column1, .column2 { 
    float:left; 
    width: 200px; 
} 
.column2 { 
    margin-left:-1px; 
    border-left:1px solid #000; 
    padding-left:10px; 
} 
.column1 { 
    border-right: 1px solid #000; 
    padding-right:10px; 
}

查看jsFiddle example with Twitter Bootstrap included。

來源

2012-05-23 19:34:18 0b10011

您可以通過幾種方法來做到這一點。最簡單的方法是：創建一個背景圖像來替換css邊界，並將其應用於應該與最高列的高度相匹配的容器。雖然這不是很靈活。

其次，使用javascript：創建一個變量maxHeight，將其設置爲0，然後遍歷每列返回該列的高度。如果它高於maxHeight，則將maxHeight設置爲該值。一旦循環結束，將所有列設置爲maxHeight的值。

在Google上有相當多的資源。特別是jQuery解決方案。

希望幫助:)

來源

2012-05-23 16:48:28 will

第一種方法是不可靠的。如果您始終知道兩列中的哪一列最高，則可以在該列上設置邊框;不需要背景圖片。問題是他*不知道哪一列是每個頁面上最高的，並且可能會有兩個以上的列。 – animuson

謝謝。我希望有更好的解決方案。我通常使用背景圖像解決方案。我還爲一個項目編寫了一個jQuery解決方案。我會保持這個問題的公開，並看看，如果有人有這個CSS技巧。 :-) – Martin

有沒有真正的簡單方法用純CSS來做到這一點，但有一個jQuery插件叫做EqualHeights，可以達到你想要的效果。基本上，你告訴它你想要應用它的元素（.column1,.column2），它會動態地將它們的高度設置爲相同的值（基於哪一個更高）。

來源

2012-05-23 16:54:15 daGUY

如何給兩個邊界，但有一個負邊界等於邊界寬度，因此它們重疊;

.column1 { 
    float:left; 
    width:200px; 
    padding:5px;  
    border-right:1px solid #000; 
} 
.column2 { 
    float:left; 
    width:200px; 
    padding:5px; 
    margin-left:-1px;  
    border-left:1px solid #000;  
}

http://jsfiddle.net/alexk/rxGUS/9/

來源

2012-05-23 17:00:09

這是一個很好的解決方案。不過，我正在爲此項目使用Twitter Bootstrap。 margin-left：-1px覆蓋了它們的CSS設置。 http://imgur.com/01Zo9該解決方案將列移動到下一行：position：relative;左：-1px – Martin

你可以玩弄display: table-cell但它是不兼容IE 8以上。這裏的an example on jsFiddle。它使用一個CSS3選擇器來處理兩者之間的邊界，但是你可以用它來弄清楚你想如何工作。

來源

2012-05-23 17:01:13 animuson

CSS 100％高度邊框顏色

回答

相關問題