如何使列與其他列更高

我正在嘗試在DIV中的第二列變高時，旁邊的列變高。如何使列與其他列更高

爲了嘗試「消毒」我試圖做的事情，我使用DIV標記中的樣式創建了以下HTML。

<body style = "width: 100%;"> 
    <div style = "position: relative; display: inline-block; width: 100%;"> 
     <div style = "display: inline-block; width: 700px; 
        background-color: #ff0000; float: left;"> 
    line 
    <br/> 
    line 
    <br/> 
    line 
    <br/> 
    line 
    <br/> 
    line 
     </div> 
     <div style = "width: 300px; height: 100%; 
         background-color: #000; float: left; color: #fff;"> 
    line 
     </div> 
    </div> 
</body>

（有一對夫婦關閉標籤的我似乎無法得到此消息格式正確無誤。）

在我的項目，紅盒子可以改變高度，因爲裏面的數據會不斷地在頁面加載後收縮。所以我用display：inline-block來設置它。

當你顯示這個，它會顯示一個紅色的區域從上到下填充區域。還有一個黑色的一面，只有一條線。

我怎樣才能讓黑色的一面走到底部並收縮並與紅色列一起成長？我需要將黑盒子延伸到與紅盒子相同的高度。

來源

2013-10-17 Lee Loftiss

我會使用JavaScript/jQuery的這個'$（ '＃DIV兩個'）高度（$（'格。。#one'）的高度（））; ' – jtheman

您在代碼示例中缺少封裝程序的關閉DIV標記。 –

是的。我的確想到了這一點。但似乎這應該起作用。黑色列被設置爲高度：100％，並且根據元素檢查員的反饋，封閉DIV與紅色DIV一樣高。所以如果可以用CSS做，我寧願這樣做。 –

您可以使用jQuery來查找最大的div /元素並將其他元素設置爲相同的大小，這是一個動態解決方案，以防萬一第一個div變大，jQuery將始終將它們設置爲相同的高度。

var maxH = 0; 
$('div.column').each(function() { 
    maxH = Math.max(maxmaxH, $(this).height()); 
}).height(maxH);

來源

2013-10-17 09:33:11 BrownEyes

這可能是有益的：

http://css-tricks.com/fluid-width-equal-height-columns/

Pure CSS solution for equal column height with stacked divs

來源

2013-10-17 10:10:48 Lukas

如何使列與其他列更高

回答

相關問題