Question

我正在尝试将表格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;
}

Answer 1

尝试将左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中试过它并且运行正常。

悬崖。

将TD中的DIV与底部对齐

1 个答案: