CSS表示：間違った位置にある表セルの内容

Question

divという2つの列を持つ1つの行（1つは80％、もう1つは残りの領域）で動作する単純な構造のdivがあります。実際には、最初の列は2つの、80％の列ですが、私は一つだけを表示し、一度display: noneで他をhidding：

$("#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のようにうまく動作します。しかし、これら2つの列にはそれぞれウィジェットがあります。 2列目にはli​​stViewウィジェットがあり、その中に複数のdivを作成します。これらのdivは第3列の内容に影響します。これは、コンテンツを引き下げる：

$("#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>

あなたは、列の状態を切り替えたときに3列目の（黒1）コンテンツがプルダウンされているか確認してください。その内部のdiv（.insiderクラス）はjavascriptウィジェットによって生成されるので、私はそのスタイルを制御することはできません。私はそれを変更することは可能だと思いますが、そうしない方がいいです。

第3列のコンテンツの位置を変更せずに列を変更するにはどうすればよいですか？

Answer 1

ただ、次のCSSを追加：あなたは常に表示最初の列を保持し、その中に両容器を移動し、それぞれを切り替えた場合私として

.table div { 
    vertical-align: top; 
}