我在使列具有相等的高度时遇到麻烦。我正在使用W3.CSS，似乎是某种原因阻止了典型的table / table-cell选项工作。我也尝试过w3-cell类，但是，它也不起作用。下面的代码是一个显示问题的小提琴链接。
body,
html {
height: 100%;
line-height: 1.8;
}
/* Full height image header */
.w3-bar .w3-button {
padding: 16px;
}
.mySlides {
display: none
}
.w3-tag,
.fa {
cursor: pointer
}
.w3-tag {
height: 15px;
width: 15px;
padding: 0;
margin-top: 6px
}
.w3-row {
display: table !important;
width: 100% !important;
}
.w3-col {
display: table-cell !important;
padding: 16px !important;
}
<div class="w3-row">
<div class="w3-col l3 m6 w3-light-grey w3-padding-16">
<h3>One</h3>
<p>One</p>
</div>
<div class="w3-col l3 m6 w3-grey w3-padding-16">
<h3>Two</h3>
<p>Two
<br/>Two</p>
</div>
<div class="w3-col l3 m6 w3-dark-grey w3-padding-16">
<h3>Three</h3>
<p>Three
<br/>Three
<br/>Three</p>
</div>
<div class="w3-col l3 m6 w3-black w3-padding-16">
<h3>Four</h3>
<p>Four
<br/>Four
<br/>Four
<br/>Four</p>
</div>
</div>
https://jsfiddle.net/taneralan/ot2zep4d/4/
编辑：
作为临时修复，我将代码调整为以下代码。
.col-container {
display: table;
width: 100%;
}
.col {
display: table-cell;
padding: 16px;
width: 25%;
}
@media only screen and (max-width: 600px) {
.col {
display: block;
width: 100%;
}
}
<div class="col-container">
<div class="col w3-light-grey w3-padding-16">
<h3>One</h3>
<p>One</p>
</div>
<div class="col w3-grey w3-padding-16">
<h3>Two</h3>
<p>Two
<br/>Two
</p>
</div>
<div class="col w3-dark-grey w3-padding-16">
<h3>Three</h3>
<p>Three
<br/>Three
<br/>Tree
</p>
</div>
<div class="col w3-black w3-padding-16">
<h3>Four</h3>
<p>Four
<br/>Four
<br/>Four
<br/>Four
</p>
</div>
最佳答案
w3-col应用float:left，因此会发生此错误，因此请解决此问题并保留您的结构，您必须使用w3-cell代替w3-col并将html结构更改为代码段，也可以将float:none应用于
编辑：对于小屏幕，您可以应用媒体查询CSS检查更新的代码段
body,
html {
height: 100%;
line-height: 1.8;
}
/* Full height image header */
.w3-bar .w3-button {
padding: 16px;
}
.mySlides {
display: none
}
.w3-tag,
.fa {
cursor: pointer
}
.w3-tag {
height: 15px;
width: 15px;
padding: 0;
margin-top: 6px
}
.w3-row {
display: table !important;
width: 100% !important;
}
.w3-col {
display: block !important;
padding: 16px !important;
float: none !important;
}
@media (min-width: 601px) {
.w3-col {
display: table-cell !important;
width: 50%;
}
} <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-row">
<div class="w3-col l3 m6 w3-light-grey w3-padding-16">
<h3>One</h3>
<p>One</p>
</div>
<div class="w3-col l3 m6 w3-grey w3-padding-16">
<h3>Two</h3>
<p>Two
<br/>Two</p>
</div>
</div>
<div class="w3-row">
<div class="w3-col l3 m6 w3-dark-grey w3-padding-16">
<h3>Three</h3>
<p>Three
<br/>Three
<br/>Three</p>
</div>
<div class="w3-col l3 m6 w3-black w3-padding-16">
<h3>Four</h3>
<p>Four
<br/>Four
<br/>Four
<br/>Four</p>
</div>
</div>
</body>关于html - W3.CSS等高高地，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48677381/