我无法让列具有相同的高度。我正在使用 W3.CSS，似乎有什么东西阻止了典型的表格/表格单元格选项的工作。我也尝试过 w3-cell 类，但是，它也不起作用。以下是显示问题的代码和 fiddle 链接。
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 applies float:left 所以出现这个错误，所以解决这个问题并保持你的结构，你必须使用 w3-cell 代替 w3-col 并将您的 html 结构更改为代码片段，或者您可以将 float:none 应用于 w3-col
编辑:对于小屏幕，您可以应用媒体查询 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/