Изменить высоту элемента td - PullRequest
0 голосов
/ 27 февраля 2020

Я работаю над кодом, написанным кем-то другим, и у меня есть элемент из 3 блоков, который мне нужно изменить.

Я пытаюсь изменить высоту первого блока, чтобы он становился настолько большим, насколько image is.

Я не могу найти никакого способа управления высотой блоков и не могу понять, что настраивает высоту.

Если у вас есть какие-либо предложения, пожалуйста, помогите.

Спасибо!

 <!--[if mso]><table border="0" cellpadding="0" cellspacing="0" align="left" style="mso-table-lspace:0pt;  mso-table-rspace:0pt; border-collapse: collapse; width: 100%"><tr><td style="width: 100%;"><![endif]-->
    <div style="float: left; width: 100%" class="sapMktBlock">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width:100%;" bgcolor="#FFFFFF">
            <tbody>
                <tr>
                    <td style="font-size:0px" class="nomob">&nbsp;</td>
                    <td width="640" align="center" style="width:640px;min-width:640px;" class="wrapto320px">
                        <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width:100%; " class="wrapto320px">
                            <tbody>
                                <tr>
                                    <td align="left">
                                        <table border="0" cellspacing="0" cellpadding="0">
                                            <tbody>
                                                <tr>
                                                    <th bgcolor="red" class="colsplit" style="width:213px;vertical-align: top;">
                                                        <table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
                                                            <tbody>
                                                                <tr>
                                                                    <td align="left" valign="top" style="padding:0px 0px 0px 0px;">
                                                                        <a href=""><img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1976" width="213" height="auto" style="display:block;height:auto;" class="nomob" alt="1976"></a>
                                                                        <div style="width:0; overflow:hidden; float:left; display:none; max-height:0px; mso-hide:all;" class="show">
                                                                            <a href=""> <img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1976mob" width="1" style="display:block;" class="wrapto100pc" alt="1976"> </a>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                               
                                                                <tr>
                                                                    <td align="center" valign="top">
                                                                        <table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
                                                                            <tbody>
                                                                                <tr>
                                                                                    <td align="left" valign="top" style="padding:0px 20px 10px 20px;">
                                                                                        <table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">

                                                                                        </table>
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </th>
                                                    <th bgcolor="#f8f3e8" class="colsplit" style="width:213px;vertical-align: top;">
                                                        <table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
                                                            <tbody>
                                                                <tr>
                                                                    <td align="left" valign="top" style="padding:0px 0px 0px 0px;">
                                                                        <a href=""><img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1996" width="213" height="auto" style="display:block;height:auto;" class="nomob" alt="1996"></a>
                                                                        <div style="width:0; overflow:hidden; float:left; display:none; max-height:0px; mso-hide:all;" class="show">
                                                                            <a href=""> <img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1996mob" width="1" style="display:block;" class="wrapto100pc" alt="1996"> </a>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td align="center" valign="top" class="mobheightclear">
                                                                        <table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
                                                                            <tbody>
                                                                                <tr>
                                                                                    <td align="left" valign="top" style="padding:20px 20px 0px 20px;">
                                                                                        <table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">

                                                                                            <tbody>
                                                                                                <tr>
                                                                                                    <td align="center" style="padding:0px 0px 10px 0px; font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;color:#004236;" class="textcenter">
                                                                                                        We launch our Against Animal Testing campaign.
                                                                                                    </td>
                                                                                                </tr>
                                                                                            </tbody>
                                                                                        </table>
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td align="center" valign="top">
                                                                        <table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
                                                                            <tbody>
                                                                                <tr>
                                                                                    <td align="left" valign="top" style="padding:0px 20px 10px 20px;">
                                                                                        <table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">

                                                                                        </table>
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </th>
                                                    <th bgcolor="#f8f3e8" class="colsplit" style="width:213px;vertical-align: top;">
                                                        <table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
                                                            <tbody>
                                                                <tr>
                                                                    <td align="left" valign="top" style="padding:0px 0px 0px 0px;">
                                                                        <a href=""><img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1998" width="213" height="auto" style="display:block;height:auto;" class="nomob" alt="1998"></a>
                                                                        <div style="width:0; overflow:hidden; float:left; display:none; max-height:0px; mso-hide:all;" class="show">
                                                                            <a href=""> <img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1998mob" width="1" style="display:block;" class="wrapto100pc" alt="1998"> </a>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td align="center" valign="top" class="mobheightclear">
                                                                        <table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
                                                                            <tbody>
                                                                                <tr>
                                                                                    <td align="left" valign="top" style="padding:20px 20px 0px 20px;">
                                                                                        <table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">

                                                                                            <tbody>
                                                                                                <tr>
                                                                                                    <td align="center" style="padding:0px 0px 10px 0px; font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;color:#004236;" class="textcenter">
                                                                                                        We celebrate 50 years of human rights with Amnesty International.
                                                                                                    </td>
                                                                                                </tr>
                                                                                            </tbody>
                                                                                        </table>
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td align="center" valign="top">
                                                                        <table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
                                                                            <tbody>
                                                                                <tr>
                                                                                    <td align="left" valign="top" style="padding:0px 20px 10px 20px;">
                                                                                        <table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">

                                                                                        </table>
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </th>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td style="font-size:0px" class="nomob">&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>
    <!--[if mso]></td></tr></table><![endif]-->

1 Ответ

1 голос
/ 27 февраля 2020

Вы не можете изменить высоту первого блока (красного), так как это ячейка в строке таблицы. Вам, вероятно, придется использовать элемент <div> для манипулирования фактором высоты.

Подробнее об этом см. В этом посте Изменение высоты на без влияния на высоту всей строки

Кроме того, если вашей основной проблемой является пробел под изображением в первом блоке, вы можете либо 1) добавить немного контента ниже, либо 2) удалить «vertical-align: top;»; inline- css свойство тега <th> красного блока, которое выровняет ваше изображение по центру ячейки.

Надеюсь, это поможет!

...