图像与边缘对齐的响应/缩放 div

Question

我正在开发一个设置为表格的网站功能。它包含文本和图像。它也需要响应。我希望将图像放在桌子的右侧，顶部、底部和右侧没有空间。这是我想要实现的目标：

这是我构建的（正在使用不同的图像）：

这是我的代码（HTML 和 CSS 必须结合使用才能在 Salesforce Marketing Cloud 中使用）：

  <style>
    
    #content{
      font-family: Arial, Helvetica, sans-serif;
      font-size:14px;
      text-align: left;
    }
    
    #table{
      background-color: #fff;  
      border-radius: 12px; 
      -moz-border-radius: 12px; 
      -webkit-border-radius: 12px; 
      box-shadow: #63666A 1px 1px 1px 1px; 
      border-radius: 12px; 
      -moz-border-radius: 12px; 
      -webkit-border-radius: 12px; 
      color: black;
    }

    #title{
      font-size:20px; 
      font-weight:bold;
      color:#005da6; 
      padding-left:20px; 
      margin-top:5%;
    }
    
    #button{
      margin-left:20px; 
      padding:12px; 
      color:white; 
      background-color:#003150;
      width:35%;
      font-weight:bold;
      border-radius: 10px;
      margin-top: 10%;
      text-align:center;
    }
    
      #button a{
      color:white; 
      text-decoration: none;  
    }
    
      #button a:hover{
      color:#47a23f;
      text-decoration: none; 
    }
    
      #button a:active{
      color:#47a23f; 
      text-decoration: none; 
    }
    
      #button a:visited{
      color:white; 
      text-decoration: none; 
    }
    


    #img{
      max-width:100%;
      }
    
    .p {
      max-width:250px;
      font-weight: regular;
    }
    
  </style>
  
   <div id="content">
    <table id="table" align="center">
      <tr>
        <th><p id="title">Monthly tips <br> for well-being</p>
          <p style="padding: 0 20px 0 20px; font-weight:normal;" class="p">Check out our monthly newsletter for healthy living tips.</p>
      
    <p id="button"><a target="blank" href="https://image.e.activehealth.com/lib/fe3715707564077a711273/m/1/5f6d1181-8af5-4000-a9ba-8b1789b29f58.pdf">See Tips</a></p>
        </th>
        <th><a target="blank" href="https://image.e.activehealth.com/lib/fe3715707564077a711273/m/1/5f6d1181-8af5-4000-a9ba-8b1789b29f58.pdf"><img id="img" src="https://image.e.activehealth.com/lib/fe3715707564077a711273/m/1/9388b441-bf80-4e2d-bc8a-34e827fb2eb6.png" alt="Tips for well-being"></a></th> 
        </tr>
    </table>
</div>

有没有办法在表格和 div 中仍然包含图像的同时消除多余的空间？

Answer 1

您可以从行和第二个标题单元格中删除任何填充和边距，还可以使用边框折叠来摆脱最后一点。

<style>
  #content {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-align: left;
  }
  
  #table {
    background-color: #fff;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    box-shadow: #63666A 1px 1px 1px 1px;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    color: black;
  }
  
  #title {
    font-size: 20px;
    font-weight: bold;
    color: #005da6;
    padding-left: 20px;
    margin-top: 5%;
  }
  
  #button {
    margin-left: 20px;
    padding: 12px;
    color: white;
    background-color: #003150;
    width: 35%;
    font-weight: bold;
    border-radius: 10px;
    margin-top: 10%;
    text-align: center;
  }
  
  #button a {
    color: white;
    text-decoration: none;
  }
  
  #button a:hover {
    color: #47a23f;
    text-decoration: none;
  }
  
  #button a:active {
    color: #47a23f;
    text-decoration: none;
  }
  
  #button a:visited {
    color: white;
    text-decoration: none;
  }
  
  #img {
    max-width: 100%;
  }
  
  .p {
    max-width: 250px;
    font-weight: regular;
  }
  
  th:nth-child(2),
  tr {
    padding: 0;
    margin: 0;
  }
  
  table {
    border-collapse: collapse;
  }
</style>

<div id="content">
  <table id="table" align="center">
    <tr>
      <th>
        <p id="title">Monthly tips <br> for well-being</p>
        <p style="padding: 0 20px 0 20px; font-weight:normal;" class="p">Check out our monthly newsletter for healthy living tips.</p>

        <p id="button"><a target="blank" href="https://image.e.activehealth.com/lib/fe3715707564077a711273/m/1/5f6d1181-8af5-4000-a9ba-8b1789b29f58.pdf">See Tips</a></p>
      </th>
      <th>
        <a target="blank" href="https://image.e.activehealth.com/lib/fe3715707564077a711273/m/1/5f6d1181-8af5-4000-a9ba-8b1789b29f58.pdf"><img id="img" src="https://image.e.activehealth.com/lib/fe3715707564077a711273/m/1/9388b441-bf80-4e2d-bc8a-34e827fb2eb6.png" alt="Tips for well-being"></a>
      </th>
    </tr>
  </table>
</div>

但是，除非你的数据真的是一个表格，而且它看起来更像是一个布局，那么现在就考虑使用 flex 或 grid 作为布局的方式。现在使用的大多数浏览器都支持它们。你可以在caniuse.com查看。