我试图将 Table TD 中的两个 DIV 对齐到该表的底部，但由于某种原因，左侧的 DIV 拒绝让步。我尝试了各种对齐方法等，但它不会移动到底部。我正在设计的电子邮件旨在响应，因此我必须确保在缩小窗口时它仍然有效。
JSFiddle 在这里: http://jsfiddle.net/hirenshah/rdux8vkg/
HTML:
<body bgcolor="#C0C0C0">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="container" width="300px" cellpadding="0" cellspacing="0" style="max-width: 600px; background-color: white; margin-left: auto; margin-right: auto;">
<tr>
<td>
<!-- Header Table Start -->
<table width="100%" cellpadding="0" cellspacing="0" >
<tr>
<td style="text-align: center; vertical-align:bottom; font-size: 0;">
<div class="headercolumnright">
<img src="http://hirenshah.co.uk/poc/logo.png" width="50%"/></div>
<div class="headercolumnleft ">Reference: 123456789</div>
</td>
</tr>
</table>
<!-- Header Table End -->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
CSS:
@media screen and (min-width: 601px) {
.container {
width:600px !important;
}
.headercolumnright {
text-align:right !important;
}
}
.headercolumnleft {
width: 300px;
display: inline-block;
text-align:left;
float: left;
font-size:12pt;
}
.headercolumnright {
width: 300px;
display: inline-block;
text-align:left;
float: right;
font-size:12pt;
vertical-align:bottom;
}
div {
outline: 1px solid red;
}
最佳答案
尝试将 Left DIV 放在 RIGHT div 之前，这样应该可以解决问题...
<tr>
<td style="text-align: center; vertical-align:bottom; font-size: 0;">
<div class="headercolumnleft ">Reference: 123456789</div>
<div class="headercolumnright">
<img src="http://hirenshah.co.uk/poc/logo.png" width="50%"/></div>
</td>
</tr>
我在您的 JSFiddle 中试过了，它运行良好。
悬崖。
关于html - 将 TD 中的 DIV 与底部对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27972131/