CSS显示：表格单元格内容位置错误

Question

我有一个简单的div结构，表现为一行有两列，一行有80％，另一行有剩余空格。实际上，第一列是两个80％的列，但我只显示一个用display: none隐藏另一个列：

＆＃13;

＆＃13;

$("#change").on("click", function() {
	$(".table .container")
  	.toggleClass("hidden");
});

＆＃13;

.table {
  display: table;
  width: 100%;
  height: 185px;
  padding: 10x 30px;
}

.table div {
  display: table-cell;
  color: #fff
}

.table .container {
  width: 80%;
  background-color: #ccc
}
.table .hidden {
  display: none
}

.table .side-bar {
  background-color: #333;
  padding: 0 20px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="table">
  <div class="container">1</div>
  <div class="container hidden">
    2
  </div>
  <div class="side-bar">3</div>
</div>
<button id="change">
Toggle column
</button>

＆＃13;

＆＃13;

＆＃13;

它与纯HTML和CSS一样好用。但是这两列每个都有一个小部件。第二列有一个listView小部件，它在里面创建了一堆div。这些div在第三栏内容中造成。它将内容拉下来：

＆＃13;

＆＃13;

$("#change").on("click", function() {
	$(".table .container")
  	.toggleClass("hidden");
});

＆＃13;

.table {
  display: table;
  width: 100%;
  height: 185px;
  padding: 10x 30px;
}

.table div {
  display: table-cell;
  color: #fff
}

.table .container {
  width: 80%;
  background-color: #ccc
}
.table .hidden {
  display: none
}

.table .side-bar {
  background-color: #333;
  padding: 0 20px
}
.table .container .insider {
  height: 300px;
  float: left;
  width: 80px; 
  height: 80px;
  margin: 5px;
  background-color: #fff;
  color: #000
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
  <div class="container">1</div>
  <div class="container hidden">
    <div class="insider">2</div>
    <div class="insider">2</div>
    <div class="insider">2</div>
    <div class="insider">2</div>
    <div class="insider">2</div>
    <div class="insider">2</div>
    <div class="insider">2</div>
    <div class="insider">2</div>
  </div>
  <div class="side-bar">3</div>
</div>
<button id="change">
Toggle container
</button>

＆＃13;

＆＃13;

＆＃13;

检查切换列状态时如何下拉第三列（黑色）内容。其中的div（带有.insider类）由javascript小部件生成，因此我无法控制它的样式。我认为可以改变它，但我不想这样做。

如何在不更改第三列内容位置的情况下更改列？

Answer 1

只需添加以下css：

.table div {
  vertical-align: top;
}