將自舉列調整爲相鄰列的高度

我希望兩個引導列的大小相等。這是該方案：將自舉列調整爲相鄰列的高度

enter image description here

我想用文字列是在高度總是等於左邊的圖片。

這是我的標記（簡體）：

<div class="row"> 
    <div class="col-xs-8" id="brand-slider"> 
     <div class="flexslider"> 
      <ul class="slides"> 
       <slides> 
      </ul> 
     </div> 
    </div> 
    <div class="col-xs-4" id="brand-aside"> 
     <div class="brand-aside-content"> 
      <text-content> 
     </div> 
    </div> 
</div>

我讀過很多類似的話題在堆棧和其他地方，但我沒有找到一個可行的解決方案。他們大多數都以某種方式令人費解。

在我正在研究的另一個項目中，我通過suign一個總是計算一列高度並將其應用到相鄰列的JS腳本來實現此效果。不過，我相信有一個更簡單的解決方案。

希望你的建議。

來源

2015-07-10 luqo33

發表您的完整（繁體字）代碼導致此。我會根據這個來設置它。 –

有2種方式解決這個的：

CSS：

使用min-height和垂直居中您的內容。

讓你的所有列的高度，對它們進行比較，以獲得最高值，而高度適用於所有的人。

你的JS解決方案是最乾淨的，則CSS可以是簡單的，但你可能最終將高度兩列，甚至不設置最小高度爲他們的一個足夠大，切割的內容進行

來源

2015-07-10 14:05:14

嗨Aramii，我不確定用百分比表示的最小高度對浮動元素有效。 Bootstrap列浮動。 – luqo33

它必須在px或某個固定值。因爲它的verticall不會中斷響應，但是如果你的內容在小設備上變大，你需要媒體查詢。反正JS解決方案是正確的我認爲 –

您可以使用CSS 3 Flexbox的..

.equal, .equal > div[class*='col-'] { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    flex:1 0 auto; 
}

http://codeply.com/go/4Mk1bavvby

來源

2015-07-10 14:48:24 ZimSystem

感謝您的演示。不幸的是，你可以從中看到這個解決方案不起作用。目標是讓內容列與左側的圖像具有相同的高度。當然，您的解決方案將兩列擴展到相同的高度，但不管內容如何。你在演示中看到它。我傾向於認爲唯一可行的解決方案是JS。 – luqo33

將自舉列調整爲相鄰列的高度

回答

相關問題