Question

我想有两个带分隔符边框的列。

当列具有相同的高度时，任务非常简单。

但是，如果列的高度不同，并且您不知道高级列的先验，（我不想使用固定值），我该如何解决问题呢？

背景颜色相同。

纯css解决方案是最好的。如果不可能，也可以使用JavaScript代码。

Answer 1

您可以将容器的显示设置为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

Answer 2

一种css方法是使用重复的背景图像作为虚线 - 这个重复在围绕2列的div上进行，如下所示：

http://jsfiddle.net/P5Z9s/（显然你会得到一个更好的形象，我只是从谷歌中提取这个）

或者使用jQuery，您可以执行以下操作：

http://jsfiddle.net/ntWRY/（你基本上将同一个类添加到你想要均衡的列，然后在该类上调用该函数）

Answer 3

我建议您阅读faux columns。

如果你没有时间（不是那么多，但......），那么使用JS你可以简单地检查哪个更高并将另一个的最小高度设置为。我认为这会像你想要的那样工作。但我建议你先了解一下人造柱。

Answer 4

也许这就是你要找的东西：

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;
}

两列与分隔符边框

4 个答案: