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列布局中間列顯示與右列相同的高度

回答

相關問題