CSS 显示 :table-cell content in wrong position

Question

我有一个简单的 div 结构，它的行为类似于表格，即一行两列，一列占 80%，另一列占剩余空间。事实上，第一列是两个 80% 的列，但我一次只显示一个，用 display: none 隐藏另一个:

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

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

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

它与纯 html 和 css 一样运行良好。但是这两列各有一个小部件。第二列有一个 listView 小部件，它在其中创建了一堆 div。那些 div 在第三列内容中造成。它将内容拉下来:

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

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

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

检查当您切换列的状态时第三列(黑色列)的内容是如何被下拉的。它里面的 div(带有 .insider 类)是由 javascript 小部件生成的，所以我无法控制它的样式。我认为可以更改它，但我不想这样做。

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

Answer 1

只需添加以下 CSS:

.table div {
  vertical-align: top;
}