Question

我无法让列具有相同的高度。我正在使用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>

Answer 1

w3-col适用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>

Answer 2

.w3-cell {
    height:200px;
    overflow-y:scroll;
    overflow-x:hidden;
    padding: 16px !important;
}

在你的css中替换为

W3.CSS Equal Col Heights

2 个答案: