做两根柱子，每根柱子里面有两根柱子，高度相等答案

【问题标题】：Make two columns, each with two columns inside, equal heights做两根柱子，每根柱子里面有两根柱子，高度相等
【发布时间】：2015-06-12 04:28:39
【问题描述】：

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

问题：主列内的两列与其主列内的其他两列不匹配。

理想情况下，我想使用使用display: table; 和display: table-cell; 的方法。由于 IE 兼容性，我不喜欢使用弹性框。

查看JSFiddle。

我可以实现外观我想通过删除作为两个主要列的两个 div 并制作四个单独的 div（每个表单元格），所有这些都具有相同的高度；但是，这并不理想。

感谢任何建议或帮助。

【问题讨论】：

您不能删除.main-column 容器吗？ jsfiddle.net/lmgonzalves/L6vwwga2/3
您可以使用 display: inline-block 代替 table 和 table-cell 来实现等高。
你可以用 Javascript 做到这一点，获取列的高度，然后将所有列的高度设置为与最高列相同。
@lmgonzalves 这就是我希望它在视觉上的样子，但出于其他样式原因，我需要将每个都放在自己的 .main-column 容器中。
@MattyF 我希望避免使用 Javascript 并找到仅使用 CSS 的解决方案。

标签： html css

【解决方案1】：

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

我可以通过删除作为两个主要列的两个 div 并制作四个单独的 div（每个一个表格单元格）来实现我想要的外观，所有这些都具有相同的高度；但是，这并不理想。

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

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>

【讨论】：

【解决方案2】：

这是一种替代方法，它使用浮动等，没有表格布局的东西。奇迹发生在margin-bottom: -99999px; padding-bottom: 99999px;。它确实会改变您的 HTML。运行 sn-p 看看它是否工作。

html {
  font: 16px Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
.container {
  border: 1px solid #586478;
  padding: 5px;
  overflow: hidden;
}
.column {
  float: left;
  background: #586478;
  color: #fff;
  height: 100%;
  padding: 20px;
  text-align: left;
  width: 25%;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}
.column:nth-child(even) {
  background: #eee;
  color: #586478;
}

<div class="container">
  <div class="column">Shorter description.</div>
  <div class="column">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 ullamc laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div class="column">Longer description.</div>
  <div class="column">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 style="clear:both;"></div>
</div>

【讨论】：