Question

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

问题：当我显示div class="mpst"时，如果文字中的行数存在差异，则此div无法到达表格底部。

代码：

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

在座的任何人都知道我该怎么做？

谢谢！

Answer 1

由于您使用表格，因此纵向对齐可用于垂直居中每个tds中的内容：

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

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 2

您需要将vertical-align: bottom添加到td元素：

.resumo td {
    font-size: 13px;
    padding:0;
    outline: 0;
    vertical-align: bottom;
}

MDN

Answer 3

你的代码有很多错误...... 我试着把它清理一下......

＆＃13;

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

＆＃13;

<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>

＆＃13;

在桌面底部定位div

3 个答案: