1

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

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

提前致谢。

4

5 回答 5

3

如何给两个边框，但有一个负边距等于边框宽度，所以它们重叠；

.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-23T17:00:09.437 回答
1

根据 Alex 的回答进行了调整，以考虑 Twitter Bootstrap 中的 CSS。由于两列之间的间距应该是20px（从margin-left:20px;），我添加了将其设置10px为边框的每一侧。如果需要20px，只需将padding-leftfor.column2和padding-rightfor设置为.column1to 即可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;
}

请参阅包含 Twitter Bootstrap 的 jsFiddle 示例。

于 2012-05-23T19:34:18.353 回答
0

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

于 2012-05-23T16:54:15.233 回答
0

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

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

谷歌上有很多这方面的资源。特别是 jQuery 解决方案。

希望有帮助:)

于 2012-05-23T16:48:28.830 回答
0

你可以玩，display: table-cell但它与 8 以下的 IE 不兼容。这是jsFiddle 上的一个示例。它使用 CSS3 选择器作为其间的边界，但您可以乱用它来确定您希望它如何工作。

于 2012-05-23T17:01:13.060 回答