javascript - 带分隔符边框的两列

Question

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

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

但是，如果列的高度不同，并且你不知道先验哪个列更高，(而且我不想使用固定值)我该如何解决这个问题？

背景颜色相同。

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

Click here for the current example .

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