1
我有一個簡單的div結構，表格的行爲與一列有兩列，一列有80％，另一列有剩餘空間。事實上，第一列是二80％列，但我只顯示一個一次hidding其他同display: none：CSS顯示：錯誤位置的表格單元格內容
$("#change").on("click", function() {
\t $(".table .container")
\t .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() {
\t $(".table .container")
\t .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小窗口產生的，所以我必須在它的風格的控制。我認爲有可能改變它，但我寧願不這樣做。
如何在不更改第三列的內容位置的情況下更改列？
至於我，這將是更好的，如果你把第一列可見總是和移動裏面容器和切換每個之一。 –
@MuhammadUsman這是一個不錯的想法其實。我會嘗試。 – DontVoteMeDown