與jquery自動高度divs相同的高度

我很難均衡兩個浮動div的高度。我試圖完成的是顯示相同的高度在兩個divs並排，因爲內容的長度將會改變。現在我的瀏覽器似乎只是忽略了Jquery代碼。與jquery自動高度divs相同的高度

以下是我有：

<style> 
#column_first { 
    width: 300px 
    float: left; 
    margin: 15px; 
    padding: 25px; 
    background-color:#fff; 
} 
#column_second { 
    width:300px; 
    float: left; 
    margin: 15px; 
    padding: 25px; 
    background-color:#fff; 
    height: auto; 
} 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script> 
var maxHeight = 0; 

$("#column_first").each(function(){ 
    if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } 
}); 

$("#column_second").height(maxHeight); 
</script> 
</head> 
<body> 
<div id="column_first"><p>Some Text</p></div> 
<div id="column_second"><p>Some Text</p></div>

來源

2013-05-01 irm

如果你想你的平衡的div的高度，用這個：

var maxHeight = 0; 
$("div").each(function(){ 
    if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } 
}); 
$("div").height(maxHeight);

jsFiddle example

您指定了特定div通過他們的ID，所以這些變化將不適用於所有的div。就我個人而言，我會給他們一個共同的班級，而不是目標。

注意，也請務必將您的jQuery的文件準備好電話：

$(document).ready(function() { 
    // Your code here 
});

來源

2013-05-01 20:29:02 j08691

它作品！！：D謝謝。 – irm 2013-05-01 20:40:03

您可以得到同等高度列純CSS：

http://cssdeck.com/labs/dxtwufys

body { /* styles for the container element */ 
    display: table; 
    border-spacing: 15px; 
} 

#column_first, #column_second { 
    display: table-cell; 
} 

#column_first { 
    width: 300px; 
    /*margin: 15px; ignored*/ 
    padding: 25px; 
    background-color:#fff; 
} 
#column_second { 
    width:300px; 
    /*margin: 15px; ignored*/ 
    padding: 25px; 
    background-color:#fff; 
}

來源

2013-05-01 20:50:05 cimmanon

與jquery自動高度divs相同的高度

回答

相關問題