html - 制作两列，每列内有两列，高度相等

Question

我正在尝试有一个包含两列的容器，每列内部都有自己的两列，所有列都具有相同的高度，仅使用 CSS。

问题:主列中的两列与其主列中的其他两列不匹配。

理想情况下，我想使用一种使用 display: table; 和 display: table-cell; 的方法。由于 IE 兼容性，我不想使用 flex box。

查看JSFiddle .

我可以实现外观我想通过删除作为两个主要列的两个 div 并制作四个单独的 div(每个一个表格单元格)，它们的高度都相等；然而，这并不理想。

我感谢任何建议或帮助。

Answer 1

这个解决方案是我能想到的最好的方法，但是您需要稍微更改一下 HTML。

I can achieve the look I want by removing the two divs serving as the two main columns and make four separate divs(each a table-cell), all with equal heights; however, it's not ideal.

我不确定您是不是要定义高度，但无论如何这是我的解决方案。

html {
    font: 16px Arial, sans-serif;
}
.container {
  border: 1px solid #586478;
  display: table;
  padding: 5px;
  table-layout: fixed;
}
.content {
  display: table-row;
}
.cell {
  display: table-cell;
  padding: 20px;
  color: #fff;
  width:25%;
}
.cell:nth-child(even) {color: #586478;}
.column {
    background: #586478;
    display: table-column;
    height: 100%;
}
.column:nth-child(even) {
    background: #eee;
}

<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div> 
  <div class="content">
    <div class="cell">Shorter description.</div>
    <div class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div class="cell">Longer description.</div>
    <div class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
  </div>
</div>

此方法使用 display: table-column;，它基本上告诉其余的行和单元格它们需要填充表格的高度。

为了更容易理解这里发生的事情，我将所有内容从 div 改回了相应的表格标签。

td{
  vertical-align: top;
  width:25%;
  color: #fff;
  padding: 20px;
}
td:nth-child(even) {color: #586478}
col {background: #586478;}
col:nth-child(even) {background: #eee;}

<table>
  <colgroup>
    <col><col><col><col>
  </colgroup>
  <tr>
    <td>Shorter description.</td>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.      
    </td>
    <td>Longer description.</td>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum    
    </td>
  </tr>
</table>