html - css 列布局中间列显示与右列相同的高度

Question

我有 3 列:左、右、中。当我添加

时，似乎无法弄清楚如何防止中间列显示右列的完整高度

<div class="row"></div>

使用其中的列。因为类 .row (bootstrap) 在它的 :before 和 :after 中有“display:table”然后导致 div 达到右列的全高并且该行之后的任何文本都在底部。这是 jsfiddle

但为了以防万一，这是基本代码，实际上并没有什么高级的。

.container{
    height: auto;
   overflow: hidden;
}

.leftcolumn{
    float:left;
    width:100px;
    background:yellow;
}

.rightcolumn{
    float:right;
    width:150px;
    background:red;
}

.middlecolumn{
    margin:0 160px 0 110px;
    background:green;
    width:auto;
    height:auto;
    position:relative;
}

Answer 1

我通过让中间列与其他两个 float 来修复您的代码。

这样你只需要调整一些边距使其水平居中。

您可以找到演示 here

获得所需结果的最佳解决方案是使用 Bootstrap 网格系统。您可以将列包装在一行中，并使用适当的类推/拉它们。 IE。 col-xs-offset-4 或 col-xs-push-4 会将您的元素向右移动 4 列，因此您可以定位所有列