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

我有3列：左，右，中间。似乎无法弄清楚如何防止中间一列从显示右侧立柱全高，当我加入css列布局中间列显示与右列相同的高度

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

来源

2015-11-13 Andres

是否有原因在'.leftcolumn'上使用'float：left'，在'.rightcolumn'上使用'float：right'然后你通过'margin'来定位中间的那个？这看起来不正确。如何浮动所有三个或使用'display：inline-block'？顺便说一句，'display：inline-block'也可以帮助你在'.row'上设置它，但是我会避免这种情况，因为它基本上是在篡改Bootstrap。 – Horen

我正在使用sass，所以黑客bootstrap不是一个问题，但显示：内联块在一个明确的浮动不起作用。和使用行内块的列不工作，因为我需要中间列覆盖页面的整个宽度，除了侧列的大小 – Andres

我通过让middlecolumn浮动与其他两个固定你的代码。

这种方式你只需要调整一些边距以水平居中。

你可以找到演示here

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

来源

2015-11-13 17:53:16 Iecya

是的，我想使用引导网格系统的主要列，但不幸的是我必须因为他们希望它是一个特定的大小。而且我看到这确定了中间栏中的高度问题，但现在的宽度并不是完全剩余的？我需要的是中间一列覆盖全部宽度，除了左侧和右侧列的大小？ – Andres

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

回答

相关问题