Question

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

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

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

查看JSFiddle。

我可以实现这个目标我想删除作为两个主要列的两个div，并制作四个独立的div（每个都是一个table-cell），所有div都具有相同的高度;但是，它并不理想。

我感谢任何建议或帮助。

Answer 1

这个解决方案是我能想到的最佳方式，但是你需要改变你的HTML。

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

我不确定你是否意味着定义高度，但无论如何这是我的解决方案。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

为了让您更容易理解这里发生了什么，我已经将所有内容从div更改为相应的表格标签。

＆＃13;

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;}

＆＃13;

<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>

＆＃13;

Answer 2

这是另一种使用浮点数等而没有表格布局的方法。魔术发生在margin-bottom: -99999px; padding-bottom: 99999px;。它确实改变了你的HTML。运行代码段以查看其是否有效。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

制作两列，每列有两列，高度相等

2 个答案: