Question

我经常使用HTML / CSS创建两个（或更多）列布局，并且需要一个分隔边框。我通常将边框添加到左侧或右侧列，但我需要边框，以匹配最高列的高度。

我已经创建了一个jsFiddle来说明这个问题：http://jsfiddle.net/rxGUS/

提前致谢。

Answer 1

如何给出两个边框，但是有一个边距等于边界宽度的边框，以便它们重叠;

.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/

Answer 2

调整了Alex的回答，考虑了Twitter Bootstrap中的CSS。由于两列之间的间距应为20px（来自margin-left:20px;），因此我添加了在边框两侧的10px。如果您需要20px，只需将padding-left的{{1}}和.column2的{{1}}设置为padding-right。

.column1

请参阅jsFiddle example with Twitter Bootstrap included。

Answer 3

你可以通过几种方式做到这一点。最简单：创建一个背景图像来替换css边框并将其应用到应与最高列的高度匹配的容器。但这并不是非常灵活。

其次，使用javascript：创建一个变量maxHeight，将其设置为0，然后遍历每个列，返回该列的高度。如果它高于maxHeight，则将maxHeight设置为该值。循环结束后，将所有列设置为maxHeight的值。

Google上有相当多的资源。特别是jQuery解决方案。

希望有所帮助：）

Answer 4

使用纯CSS实现这一点并不是一种简单的方法，但是有一个名为EqualHeights的jQuery插件可以实现您想要的效果。基本上，您可以告诉它要将哪些元素应用到（.column1，.column2），并且它会动态地将它们的高度设置为相同的值（基于哪个更高）。

Answer 5

您可以使用display: table-cell，但它与小于8的IE不兼容。这是an example on jsFiddle。它使用CSS3选择器来处理它们之间的边界，但是你可以搞清楚它是如何工作的。

CSS 100％高度边框颜色

5 个答案: