Таблица td, разная высота div по вертикали выравнивание по верху - PullRequest
Новая
       37

Таблица td, разная высота div по вертикали выравнивание по верху

0 голосов
/ 05 августа 2020

В настоящее время я работаю над информационным бюллетенем, в котором есть 2 столбца, но высота первого блока div не регулируется, если в другом имеется несколько строк. Я хочу, чтобы они были выровнены по вертикали вверху или автоматически регулировали высоту в зависимости от содержимого без изменения изображения и высоты кнопки Подробнее. Все должно быть согласовано. (Оба изображения выровнены, подробнее в нижней части div, et c.)

Вот код: 

<tr>
  <td>
    <table cellpadding="0" cellspacing="0" border="0" width="650" class="contenttable" align="center">
      <tbody>
        <tr>
          <td style="font-size:0;">
            <div class="listing_text fullwidthsm" style="display:inline-block;padding-top:5%;padding-bottom:5%;padding-right:5%;padding-left:5%;width:40%;height: 100%;">
              <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
                <tbody>
                  <tr height="38">
                    <td valign="top" style="font-family:Arial, Helvetica, sans-serif;color:#68C04A;font-size:16px;">
                      <a href="#" title="The Musical Circus Duo. Tuesday August 18 at 7 p.m." style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:1.5;color:#68C04A;text-decoration:none;text-align:right;width:100%;display:block;font-weight:bold;padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;">
                      The Musical Circus Duo. Tuesday August 18 at 7 p.m.
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <td style="font-size:10px;line-height:1;">&nbsp;</td>
                  </tr>
                  <tr>
                    <td>
                      <a href="#" title="The Musical Circus Duo. Tuesday August 18 at 7 p.m." style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:1.5;color:#68C04A;text-decoration:none;text-align:right;width:100%;display:block;font-weight:bold;padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;">
                      <img src="https://img.url" width="100%">
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <td style="font-size:10px;line-height:1;">&nbsp;</td>
                  </tr>
                  <tr>
                    <td class="listing_text" align="right">
                      <a href="#" title="The Musical Circus Duo. Tuesday August 18 at 7 p.m." style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:1.5;color:#68C04A;text-decoration:none;text-align:right;width:100%;display:block;font-weight:bold;padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;">Read more &gt;</a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="listing_text fullwidthsm" style="display:inline-block;padding-top:5%;padding-bottom:5%;padding-right:5%;padding-left:5%;width:40%;">
              <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
                <tbody>
                  <tr height="38">
                    <td valign="top" style="font-family:Arial, Helvetica, sans-serif;color:#68C04A;font-size:16px;">
                      <a href="#" title="Special Meeting Of The Council On Tuesday, August 11, At 7:00 P.M." style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:1.5;color:#68C04A;text-decoration:none;text-align:right;width:100%;display:block;font-weight:bold;padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;">
                      Special Meeting Of The Council On Tuesday, August 11, At 7:00 P.M.
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <td style="font-size:10px;line-height:1;">&nbsp;</td>
                  </tr>
                  <tr>
                    <td>
                      <a href="#" title="Special Meeting Of The Council On Tuesday, August 11, At 7:00 P.M." style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:1.5;color:#68C04A;text-decoration:none;text-align:right;width:100%;display:block;font-weight:bold;padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;">
                      <img src="https://img.url" width="100%">
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <td style="font-size:10px;line-height:1;">&nbsp;</td>
                  </tr>
                  <tr>
                    <td class="listing_text" align="right">
                      <a href="#" title="Special Meeting Of The Council On Tuesday, August 11, At 7:00 P.M." style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:1.5;color:#68C04A;text-decoration:none;text-align:right;width:100%;display:block;font-weight:bold;padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;">Read more &gt;</a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </td>

Как это выглядит сейчас

...