HTML布局问题：表格下方文本与图片位置错乱求助

本应位于表格下方的文本和图片出现位置错误（见截图）：

CSS代码 #

.openingtimes {
  text-align: right;
  padding-top: auto;
  padding-right: auto;
  padding-left: auto;
  padding-bottom: auto;
}

table,
tr,
td {
  border: 1px solid;
  text-align: center;
  padding-top: auto;
  padding-right: auto;
  padding-left: auto;
  padding-bottom: auto;
}

HTML代码 #

<div>
  <table border="1" align="right">
    <tbody>
      <tr>
        <td>Monday</td>
        <td>0900 - 1800</td>
      </tr>
      <tr>
        <td>Tuesday</td>
        <td>0900 - 1800</td>
      </tr>
      <tr>
        <td>Wednesday</td>
        <td>0900 - 1800</td>
      </tr>
      <tr>
        <td>Thursday</td>
        <td>0900 - 1800</td>
      </tr>
      <tr>
        <td>Friday</td>
        <td>0900 - 1800</td>
      </tr>
      <tr>
        <td>Saturday</td>
        <td>0900 - 1700</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="openingtimes">
  <br>
  <b>All major card types accepted including contactless </b><br>
  <br>
  <img src="https://stylebyjulie.co.uk/wp-content/uploads/2021/10/paymentmethods.png" alt="style by julie payment methods" width="227" height="28" align="right">
  <br><br>
  <b>Supporting (click to find out more)</b><br><br>
  <a href="https://stylebyjulie.co.uk/little-princess-trust/">
    <img title="little princess trust" src="https://stylebyjulie.co.uk/wp-content/uploads/2021/10/littleprincess-logo.png" alt="little princess trust" width="138" height="111" align="right"></a>
</div>

1. HTML的align="right"是废弃属性，会触发元素浮动，导致后续内容环绕浮动元素，而非在其下方按顺序排列。
2. CSS中padding: auto无效，padding属性不支持auto取值，该设置不会产生任何间距效果。

CSS代码 #

/* 父容器统一控制靠右对齐 */
.content-container {
  max-width: 100%;
  margin-left: auto;
  text-align: right;
}

.openingtimes {
  text-align: right;
  /* 用margin控制与表格的间距 */
  margin-top: 20px;
}

table, tr, td {
  border: 1px solid;
  text-align: center;
  /* 给单元格设置合理内边距，优化视觉效果 */
  padding: 8px 12px;
}

/* 统一控制图片靠右，替代HTML的align属性 */
.openingtimes img {
  display: block;
  margin-left: auto;
  margin-top: 10px;
  margin-bottom: 15px;
}

HTML代码 #

<div class="content-container">
  <table>
    <tbody>
      <tr>
        <td>Monday</td>
        <td>0900 - 1800</td>
      </tr>
      <tr>
        <td>Tuesday</td>
        <td>0900 - 1800</td>
      </tr>
      <tr>
        <td>Wednesday</td>
        <td>0900 - 1800</td>
      </tr>
      <tr>
        <td>Thursday</td>
        <td>0900 - 1800</td>
      </tr>
      <tr>
        <td>Friday</td>
        <td>0900 - 1800</td>
      </tr>
      <tr>
        <td>Saturday</td>
        <td>0900 - 1700</td>
      </tr>
    </tbody>
  </table>

  <div class="openingtimes">
    <strong>All major card types accepted including contactless</strong>
    <img src="https://stylebyjulie.co.uk/wp-content/uploads/2021/10/paymentmethods.png" alt="style by julie payment methods" width="227" height="28">
    <strong>Supporting (click to find out more)</strong>
    <a href="https://stylebyjulie.co.uk/little-princess-trust/">
      <img title="little princess trust" src="https://stylebyjulie.co.uk/wp-content/uploads/2021/10/littleprincess-logo.png" alt="little princess trust" width="138" height="111">
    </a>
  </div>
</div>

• 废弃属性别再用：HTML的align、border等属性已被CSS取代，统一用CSS控制布局和样式，代码更易维护。
• padding/margin取值规范：padding不支持auto，需要间距时用具体像素值（如10px）或相对单位（如1rem）。
• 语义化标签优先：用<strong>代替<b>，<strong>表示语义上的强调，<b>仅为视觉加粗，语义化更利于SEO和可读性。
• 减少冗余标签：去掉不必要的<br>，用CSS的margin控制元素间距，布局更灵活可控。
• 容器化布局：用一个父容器包裹所有相关内容，统一控制对齐、间距等样式，避免零散的布局设置。

内容的提问来源于stack exchange，提问作者ferarri