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

我通过让middlecolumn浮动其他两个来修复你的代码。

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

您可以找到演示here

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

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

1 个答案: