文章/答案/技术大牛

发布

问W3.CSS相等的列高度
EN

Stack Overflow用户

提问于 2018-02-08 12:08:32

回答 2查看 1K关注 0票数 0

我在获得相同高度的列时遇到了困难。我使用的是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

回答 2

Stack Overflow用户

发布于 2018-02-08 13:00:11

w3-col应用了float:left，因此出现了这个错误，所以解决这个问题并保留您的结构，您必须使用w3-cell代替w3-col，并将您的html结构更改为代码片段，或者您可以将float:none应用于w3-col

css编辑：对于小屏幕，你可以应用媒体查询css check更新代码片段

    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>

票数 1

Stack Overflow用户

发布于 2018-02-08 13:06:35

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

在您的css中替换为

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48677381

复制

相似问题

问W3.CSS相等的列高度
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问W3.CSS相等的列高度EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问W3.CSS相等的列高度
EN