我有两个div元素并排。我希望它们的高度是相同的,并保持不变,如果其中一个调整大小。如果其中一个增长是因为放入了文本,那么另一个也应该增长以匹配高度。不过我还是搞不懂这个。什么好主意吗?
<div style="overflow: hidden">
<div style="
border: 1px solid #cccccc;
float: left;
padding-bottom: 1000px;
margin-bottom: -1000px;
">
Some content!<br />
Some content!<br />
Some content!<br />
Some content!<br />
Some content!<br />
</div>
<div style="
border: 1px solid #cccccc;
float: left;
padding-bottom: 1000px;
margin-bottom: -1000px;
">
Some content!
</div>
</div>
我有同样的问题,所以我创建了这个小函数使用jquery jquery是每个web应用程序的一部分。
function fEqualizeHeight(sSelector) {
var sObjects = $(sSelector);
var iCount = sObjects.length;
var iHeights = [];
if (iCount > 0) {
$(sObjects).each(function () {
var sHeight = $(this).css('height');
var iHeight = parseInt(sHeight.replace(/px/i,''));
iHeights.push(iHeight);
});
iHeights.sort(function (a, b) {
return a - b
});
var iMaxHeight = iHeights.pop();
$(sSelector).each(function () {
$(this).css({
'height': iMaxHeight + 'px'
});
});
}
}
您可以在页面就绪事件时调用此函数
$(document).ready(function(){
fEqualizeHeight('.columns');
});
我希望这对你有用。
你可以使用jQuery轻松实现这一点。
CSS
.left, .right {border:1px solid #cccccc;}
jQuery
$(document).ready(function() {
var leftHeight = $('.left').height();
$('.right').css({'height':leftHeight});
});
HTML
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet.</p>
</div>
你需要包含jQuery