Удалить интервал и центральный текст - PullRequest
Новая
       9

Удалить интервал и центральный текст

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

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

Также я хочу центрировать текст из третьего блока внутри блока.

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

Я действительно ценю любые предложения, заранее спасибо. 

<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="#3B3B3C" class="colsplit" style="width:213px;">
              <table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                <tr>
                  <td align="left" style="padding:0px 0px 0px 0px;">
                  <a href=""><img src="https://dummyimage.com/540x500/000/fff&amp;text=left" width="270" 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="#3B3B3C" class="colsplit" style="width:100px; 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 alt="1996" class="nomob" style="display:block;height:auto;" height="auto" width="100" src="https://dummyimage.com/200x500/000/fff&amp;text=middle"></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">
                  <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="#3B3B3C" class="colsplit" style="width:365px;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;">
                  <span style="white-space: normal;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa </span>
                  <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">
                  <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>

Ответы [ 3 ]

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

Надеюсь, это то, что вы ищете: 

<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="#3B3B3C" class="colsplit" style="width:213px;">
              <table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                <tr>
                  <td align="left" style="padding:0px 0px 0px 0px;">
                  <a href=""><img src="https://dummyimage.com/540x500/000/fff&amp;text=left" width="270" 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>
                </tbody>
              </table>
              </th>
              <th bgcolor="#3B3B3C" class="colsplit" style="width:100px; 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 alt="1996" class="nomob" style="display:block;height:auto;" height="auto" width="100" src="https://dummyimage.com/200x500/000/fff&amp;text=middle"></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>
                </tbody>
              </table>
              </th>
              <th bgcolor="#3B3B3C" class="colsplit" style="width:365px;vertical-align: top;padding:5px">
              <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;">
                  <span style="white-space: normal;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa </span>
                  <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">
                  <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>
0 голосов
/ 27 февраля 2020

Что ж, надеюсь, я вас хорошо понял. На самом деле я обнаружил, что есть некоторые <tr>, которые вам не нужны, и затем я добавляю style="text-align:center;", чтобы поместить ваш текст в центр 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </script>
</head>
<body>

<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="#3B3B3C" class="colsplit" style="width:213px;">
                                                        <table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
                                                            <tbody>
                                                                <tr>
                                                                <td align="left" style="padding:0px 0px 0px 0px;">
                                                                    <a href=""><img src="https://dummyimage.com/540x500/000/fff&amp;text=left" width="270" 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>
                                                        </tbody>
                                                    </table>
                                                </th>
                                                <th bgcolor="#3B3B3C" class="colsplit" style="width:100px; 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 alt="1996" class="nomob" style="display:block;height:auto;" height="auto" width="100" src="https://dummyimage.com/200x500/000/fff&amp;text=middle"></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>

                                                        </tbody>
                                                    </table>
                                                </th>
                                                <th bgcolor="#3B3B3C" class="colsplit" style="width:365px;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;">
                                                                    <div style="white-space: normal;text-align:center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa </div>
                                                                    <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>
                                                        </tbody>
                                                    </table>
                                                </th>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                        </td>
                    <td style="font-size:0px" class="nomob">&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>
0 голосов
/ 27 февраля 2020

Это то, что вы хотите. 

<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="#3B3B3C" class="colsplit" style="width:213px;">
                          <table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
                            <tbody>
                              <tr>
                                <td align="left" style="padding:0px 0px 0px 0px;">
                                  <a href=""><img src="https://dummyimage.com/540x500/000/fff&amp;text=left" width="270" 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="#3B3B3C" class="colsplit" style="width:100px; 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 alt="1996" class="nomob" style="display:block;height:auto;" height="auto" width="100" src="https://dummyimage.com/200x500/000/fff&amp;text=middle"></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">
                                  <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="#3B3B3C" class="colsplit" style="width:365px;vertical-align: middle;padding-left: 20px;">
                          <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;">
                                  <span style="white-space: normal;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa </span>
                                    <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">
                                    <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>

попробуйте это.

...