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

Posted 2023-03-05

【中文标题】图像与边缘对齐的响应/缩放 div

【英文标题】：Responsive/scaling div with image aligned to edges

【发布时间】：2021-11-01 03:25:04

【问题描述】：

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

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

这是我的代码（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" ></a></th> 
        </tr>
    </table>
</div>

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

【问题讨论】：

第一件事是“不要使用表格进行布局”......它不再是 1990 年代了。

【参考方案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" ></a>
      </th>
    </tr>
  </table>
</div>

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