我有 1 个父表单元格 .t
和 2 个子 block .ch1
和 .ch2
:
HTML:
<div class="t">
<div class="ch1">1</div>
<div class="ch2">2</div>
</div>
CSS:
.t {
display: table-cell;
background-color:green;
height:200px;
width:200px;
}
.ch1 {
background-color:blue;
display: block;
}
.ch2 {
background-color:red;
display: block;
}
是否可以将 .ch2
推到底部,但将 .ch1
留在顶部(如果使用 vertical-align: bottom;
的.t
它将把两个 block 推到底部)
JSFiddle: https://jsfiddle.net/hvz4cn69/
最佳答案
Flexbox 可以做到这一点:
.t {
display: flex;
flex-direction: column;
background-color: green;
height: 200px;
width: 200px;
justify-content: space-between;
}
.ch1 {
background-color: blue;
display: block;
}
.ch2 {
background-color: red;
display: block;
}
<div class="t">
<div class="ch1">1</div>
<div class="ch2">2</div>
</div>
或者
.t {
display: flex;
flex-direction: column;
background-color: green;
height: 200px;
width: 200px;
}
.ch1 {
background-color: blue;
display: block;
}
.ch2 {
background-color: red;
display: block;
margin-top: auto;
}
<div class="t">
<div class="ch1">1</div>
<div class="ch2">2</div>
</div>
关于html - 在表格单元格中垂直对齐每个 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35221068/