CSS display:table-单元格内容位置错误
CSS display:table-cell content in wrong position
我有一个简单的 div 结构,其行为类似于表格,即一行两列,一列占 80%,另一列占剩余 space。事实上,第一列是两个 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。那些 divs 在第三列内容中造成。它把内容拉下来:
$("#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>
检查当您切换列状态时第三列(黑色列)的内容是如何被下拉的。它里面的 divs(.insider
class)是由 javascript 小部件生成的,所以我无法控制它的样式。我认为可以更改它,但我不想这样做。
如何在不更改第三列内容位置的情况下更改列?
只需添加以下内容css:
.table div {
vertical-align: top;
}
我有一个简单的 div 结构,其行为类似于表格,即一行两列,一列占 80%,另一列占剩余 space。事实上,第一列是两个 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。那些 divs 在第三列内容中造成。它把内容拉下来:
$("#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>
检查当您切换列状态时第三列(黑色列)的内容是如何被下拉的。它里面的 divs(.insider
class)是由 javascript 小部件生成的,所以我无法控制它的样式。我认为可以更改它,但我不想这样做。
如何在不更改第三列内容位置的情况下更改列?
只需添加以下内容css:
.table div {
vertical-align: top;
}