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％高度边框颜色

回答

相关问题