W3.CSS等高的高度

我很难获得列的高度相等。我正在使用W3.CSS，似乎有些事情阻止了典型的表/表格选项工作。我也尝试过W3细胞类，但是它也不起作用。以下是显示问题的代码A小提琴链接。

    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结构更改为Snippet，或者您可以应用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>

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

在您的CSS

中替换

相关内容

最新更新

热门标签：