html - 将 div 定位在表格底部

Question

我正在使用此表来显示我的表数据的摘要。

问题:当我显示 div class="mpst" 时，当文本中的行数不同时，此 div 无法到达我的表格底部。

代码:

.resumo tr {
    color: #253037;
    background-color:#e9e9e9;
}
.resumo table  {
    flex-wrap: nowrap; align-items: center;
    width: calc(90% + 4vh); 
    border-collapse: collapse; 
    margin:0 auto;
    text-align:center;	
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 2vh 0;
    vertical-align: baseline;
    border:0;
    outline: 0;
}
.resumo td {
    font-size: 13px;
    padding:0;
    outline: 0;
}
.tbpad {
    padding-top:4vh;
    padding-left:2vh;
    padding-right:2vh;
}
.mpst {
    background-color:black;
    width:calc(94%);
    padding:3%;
    margin-top:4vh;
    margin-left:0;
    position:relative;
    color:#ffffff;
    outline: 0;
}
.stgreen {
    background-color: #33CA49; 
}
.styellow {
    background-color: #FDBD41; 
}
td img {
    max-width:70%;
    height:auto;
    vertical-align: middle;
    margin-bottom:5%;
}

<div class="resumo"> <table id="statuscp"><tbody><tr><td class="status"> <div class="tbpad"><img src="resources/img/transm.png"><p class="pblock">Transm</p></div><div class="mpst styellow">MP &gt; 1K</div></td> <td class="status "> <div class="tbpad"><img src="resources/img/command.jpg"><p class="pblock">Final <br>command LD</p></div><div class="mpst styellow">MP &gt; 1K</div></td> <td class="status "> <div class="tbpad"><img src="resources/img/command.jpg"><p class="pblock">Final <br>command LE</p></div><div class="mpst styellow">MP &gt; 1K</div></td> <td class="status "> <div class="tbpad"><img src="resources/img/engine.jpg"><p class="pblock">Engine</p></div><div class="mpst stgreen">MN &gt; 1K</div></td> </tr></tbody></table></div>

这里有人知道我该怎么做吗？

谢谢!

Answer 1

因为你使用的是表格，vertical-align 可以让每个 tds 中的内容垂直居中:

.resumo td {
    font-size: 13px;
    padding:0;
    outline: 0;
    vertical-align:bottom; /* <=== here , align content to bottom */
}

.resumo tr {
    color: #253037;
    background-color:#e9e9e9;
}
.resumo table  {
    flex-wrap: nowrap; align-items: center;
    width: calc(90% + 4vh); 
    border-collapse: collapse; 
    margin:0 auto;
    text-align:center;	
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 2vh 0;
    vertical-align: baseline;
    border:0;
    outline: 0;
}
.resumo td {
    font-size: 13px;
    padding:0;
    outline: 0;
    vertical-align:bottom;
}
.tbpad {
    padding-top:4vh;
    padding-left:2vh;
    padding-right:2vh;
}
.mpst {
    background-color:black;
    width:calc(94%);
    padding:3%;
    margin-top:4vh;
    margin-left:0;
    position:relative;
    color:#ffffff;
    outline: 0;
}
.stgreen {
    background-color: #33CA49; 
}
.styellow {
    background-color: #FDBD41; 
}
td img {
    max-width:70%;
    height:auto;
    vertical-align: middle;
    margin-bottom:5%;
}

<div class="resumo"> <table id="statuscp"><tbody><tr><td class="status"> <div class="tbpad"><img src="resources/img/transm.png"><p class="pblock">Transm</p></div><div class="mpst styellow">MP &gt; 1K</div></td> <td class="status "> <div class="tbpad"><img src="resources/img/command.jpg"><p class="pblock">Final <br>command LD</p></div><div class="mpst styellow">MP &gt; 1K</div></td> <td class="status "> <div class="tbpad"><img src="resources/img/command.jpg"><p class="pblock">Final <br>command LE</p></div><div class="mpst styellow">MP &gt; 1K</div></td> <td class="status "> <div class="tbpad"><img src="resources/img/engine.jpg"><p class="pblock">Engine</p></div><div class="mpst stgreen">MN &gt; 1K</div></td> </tr></tbody></table></div>