可以通过以下几种方法实现:
<style>
.container {
display: flex;
}
.item {
flex: 1;
}
</style>
<div class="container">
<div class="item">内容1</div>
<div class="item">内容2</div>
<div class="item">内容3</div>
</div>
推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm
<style>
.container {
display: table;
}
.item {
display: table-cell;
vertical-align: top;
}
</style>
<div class="container">
<div class="item">内容1</div>
<div class="item">内容2</div>
<div class="item">内容3</div>
</div>
推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm
<script>
window.onload = function() {
var items = document.getElementsByClassName('item');
var maxHeight = 0;
for (var i = 0; i < items.length; i++) {
if (items[i].offsetHeight > maxHeight) {
maxHeight = items[i].offsetHeight;
}
}
for (var i = 0; i < items.length; i++) {
items[i].style.height = maxHeight + 'px';
}
}
</script>
<div class="container">
<div class="item">内容1</div>
<div class="item">内容2</div>
<div class="item">内容3</div>
</div>
推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm
以上是使网格布局div具有相同高度的几种方法,可以根据具体需求选择适合的方法进行实现。
领取专属 10元无门槛券
手把手带您无忧上云