1

在这种情况下

  • 需要为所有三列保持相同的高度（这已经根据当前代码工作，“.col”使用 flex 获得相同的高度）
  • 需要为所有黄色 div 设置黄色 div 的最大高度（动态内容）
  • 只需要使用 CSS（不是 JavaScript）来实现
  • 使用弹性（不是表格）

这是测试代码jsfiddle

当前设计 需要设计目前的设计在这里 需要设计

我在“底部内容”区域内有动态内容。我需要做的是，将所有“底部内容”区域设置为相同的高度（为 3 个黄色区域设置最大高度），并且所有“col”也应该是相同的高度。

HTML 代码

<div class="container">
    <div class="col">
         <div class="top-content">top content here</div>
         <div class="bottom-content">bottom content here</div>
    </div>
    <div class="col">
         <div class="top-content">top content here</div>
         <div class="bottom-content">bottom content here</div>
    </div>
    <div class="col">
         <div class="top-content">top content here</div>
         <div class="bottom-content">bottom content here</div>
    </div>
</div>

CSS 代码

.container {      
  display: -webkit-flex;        
  display: -ms-flexbox;     
  display: flex;
  flex-flow: row wrap;
  overflow: hidden;
}
.container .col {
  flex: 1;
  padding: 20px;
}
.container .col:nth-child(1) { 
  background: #eee; 
}
.container .col:nth-child(2) { 
  background: #ccc;
}
.container .col:nth-child(3) { 
  background: #eee;
}
.top-content {
  background: #888;
  border-bottom: 1px solid #333;
  padding: 5px;
}
.bottom-content {
  background: yellow;
  padding: 5px;
}
4

0 回答 0