"我正在为发票创建HTML模板，在将QR代码图像放置在正确位置时遇到一些困难。具体来说，我希望QR代码图像直接显示在发票信息表下方，但它没有显示在所需位置。

table {
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  margin: 10px auto;
  font-size: 14px;
  color: #1e2b40;
}

td,
th {
  border: 1px solid gray;
  padding: 6px;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.bold {
  font-weight: bold;
}

.contact-info {
  font-family: Arial, sans-serif;
  font-size: 12px;
  float: right;
  margin: 1px auto;
  font-weight: normal;
}

.contact-info ul {
  list-style-type: none;
}

.qr-code {
  clear: both;
  display: block;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.srs.logo {
  width: 300px;
  height: 150px;
  margin: 10px auto;
}

.items-table {
  float: left;
  padding: 6px;
  margin: 10px auto;
  border-collapse: collapse;
  width: 100%;
}

.items-table th,
.items-table td {
  border: 1px solid gray;
  padding: 6px;

<header>
  <!-- header content goes here -->

  <img src="https://drive.google.com/file/d/1mwNaPe8w4Bxn7mkXivmI2dqcwBg4_aog" alt="srs-logo" />

  <div class="contact-info" style="list-style-type: none">
    <ul>
      <li>SARL RO SOLUTION</li>
      <li>RC: RC:</li>
      <li>NIF: NIF</li>
      <li>AI: AI</li>
      <li>Phone: Phone:</li>
      <li>Email: info@company.com</li>
    </ul>
  </div>

</header>

<hr style="margin-top: 100px;">

<!-- rest of the page content goes here -->

<table style="float: left;">
  <tr>
    <td colspan="2" class="center bold">Customer Information</td>
    <tr>
      <tr>
        <td>Customer Name:</td>
        <td>&lt;&lt;[Customer Name]&gt;&gt;</td>
      </tr>
      <tr>
        <td>Customer Address:</td>
        <td>&lt;&lt;[Customer Address]&gt;&gt;</td>
      </tr>
      <tr>
        <td>Customer NIF:</td>
        <td>&lt;&lt;[Customer NIF]&gt;&gt;</td>
      </tr>
      <tr>
        <td>Customer RC:</td>
        <td>&lt;&lt;[Customer RC]&gt;&gt;</td>
      </tr>
      <tr>
        <td>Customer AI:</td>
        <td>&lt;&lt;[Customer AI]&gt;&gt;</td>
        <tr>
          <td>Telephone:</td>
          <td>&lt;&lt;[Company AI]&gt;&gt;</td>
        </tr>
</table>

<table style="float: right; margin: 0 auto">
  <tr>
    <td colspan="2" class="center bold">Invoice Information</td>
    <tr>
      <td>Invoice Date:</td>
      <td>&lt;&lt;[Invoice Date]&gt;&gt;</td>
      <tr>
        <td>Invoice ID:</td>
        <td>&lt;&lt;[Invoice ID]&gt;&gt;</td>
      </tr>
</table>

<br style="clear: both;">

<img src="<<[Invoice Date]>>" alt="qr-code">

<br style="clear: both;">
<hr>

<table style="float: left;">
  <tr>
    <td rowspan="1" class="center bold">Related Sales</td>
    <td colspan="" class="center bold">Invoice Information</td>
</table>

<br style="clear: both;">

<hr>

<table class="items-table">

  <thead>
    <tr>
      <th>Item description</th>
      <th>Quantity</th>
      <th>Unit Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <p class="startifend">&lt;&lt;Start:[invoice_key].[Related invoice_items]&gt;&gt;</p>
    <tr>
      <td>&lt;&lt;[description]&gt;&gt;</td>
      <td>&lt;&lt;[quantity]&gt;&gt;</td>
      <td>&lt;&lt;[unit_price]&gt;&gt;</td>
      <td>&lt;&lt;[total_price]&gt;&gt;</td>
    </tr>
    <p class="startifend">&lt;&lt;End&gt;&gt;</p>
  </tbody>
</table>
<br style="clear: both;">
<hr>