Question

我的左侧流体宽度和右侧固定宽度。我需要在它们之间有一个边界，这是最高柱的高度。

以下是我所拥有的简化布局：

.left {
    width: 100%;
    float: left;
}
.left-inner {
    margin-right: 275px;
    padding-right: 30px;
    border-right: 2px dotted #47718D;
}   
.right {
    float: left;
    padding-left: 30px;
    width: 275px;
    margin-left: -275px;
}
<div class="left">
    <div class="left-inner">
        Content
    </div>
</div>
<div class="right">
    Sidebar
</div>

这是一个更详细的小提琴：http://jsfiddle.net/meaLh

如您所见，左边栏内容停止的边框会停止。两列都是可变高度，因此有时左列比右列长。我如何让这些相等，以便我可以让边界一直向下？

Answer 1

* {
    box-sizing: border-box;
}
.wrapper {
    width: 100%;
    max-width: 1260px;
}
.left {
    width: 100%;
    float: left;
}
.left-inner {
    margin-right: 275px;
    padding-right: 30px;
}
.right {
    float: left;
    padding-left: 30px;
    width: 275px;
    margin-left: -275px;
    border-left: 2px dotted #47718D;
}

Answer 2

由于border属性应用于左列，因此左边列的内容停止的边框会停止。类似地，应用于右列的边框将停在右列内容停止的位置。现在，如果你想要边框要低于内容，您可以在列的底部使用一些填充。您也可以在左侧和右侧列之间使用第三列，宽度非常小，并应用最小高度和边框。

流体宽度并固定在中间有边框的柱子上

2 个答案: