我一直在开发一个需要相等列的网站。我正在使用以下代码:
<script type="text/javascript">
(function() {
function equalHeights(selector) {
var maxHeight = 0;
function calcEqualHeight() {
var el = $(this);
maxHeight = el.height() > maxHeight ? el.height() : maxHeight;
}
selector.each(calcEqualHeight).height(maxHeight);
}
equalHeights($('.exampleclass1'));
equalHeights($('.exampleclass2'));
})();
</script>
问题是,有时当页面加载时,高度并不总是正确并且内容重叠。我想知道如何更改它来计算页面加载的高度?
最佳答案
不要使用 JS 来完成 CSS 的工作。
.column1 {background-color: #fcc}
.column2 {background-color: #cfc}
.columns {
display: flex;
align-items: stretch;
}
.columns>div {
flex: 1 0 0;
}
<div class="columns">
<div class="column1"><p>Short column</p></div>
<div class="column2">
<p>Tall column</p>
<p>Look at how tall I am!</p>
</div>
</div>
关于javascript - 等列 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42723305/