W3.CSS 等列高度答案

【问题标题】：W3.CSS Equal Col HeightsW3.CSS 等列高度
【发布时间】：2018-02-08 13:39:01
【问题描述】：

我无法让列的高度相等。我正在使用 W3.CSS，似乎有些东西阻止了典型的表格/表格单元选项工作。我也尝试过 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>

【问题讨论】：

标签： html css w3.css

【解决方案1】：

w3-col 应用 float:left 所以会发生这个错误，所以解决这个问题并保持你的结构，你必须使用 w3-cell 代替 w3-col 并将你的 html 结构更改为 sn-p 或者你可以应用 @ 987654324@转w3-col

编辑：对于小屏幕，您可以应用媒体查询 css 检查更新的 sn-p

    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>

【讨论】：

这会改变对齐方式，并且不会保留移动设备时阻止的更改。
这类似于我在编辑中提到的修复，但是，您的解决方案在大屏幕上的 col 宽度错误。应该是四个，但是，你的是两个。

【解决方案2】：

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

在你的css中用这个替换

【讨论】：

我试图避免设置 div 高度。