Question

我正在尝试通过修改现有的html来创建发票。我想在页面顶部放置一个图像（徽标），然后在它下面开一个表。我遇到的问题是，无论我做什么，表格中的文字都会出现在图像旁边。我已经找到了各种各样的想法来围绕图像包装文本，但实际上并没有在图像周围包装文本。除了作为图像的标题，也不是我想要的。我的代码是： -

＆＃13;

<style>
div.logo {float: right;}
table {width: 100%; table-layout: fixed;}
.twenty {width: 20%; }
.thirty {width: 30%; }
.fifty {width: 50%; }
</style>
<div class = "logo">
  <img align="right" src="https://cdn.shopify.com/s/files/1/1212/3100/files/logo.png?14279783622096777710" width="30%" height="30%"><br clear="all">
</div>
<table>
  <colgroup>
    <col class="fifty" />
    <col class="twenty" />
    <col class="thirty" />
  </colgroup>
  <tbody>
    <tr>
      <td></td>
      <td>Invoice Date</td>
      <td>{{ shop_name }}</td>
    </tr>
    <tr>
      <td></td>
      <td>Date {{created_at | date: "%d/%m/%y" }}</td>
      <td>{{ shop.address }}</td>
    </tr>
  </tbody>
</table>

＆＃13;

任何帮助都非常感激。

我得到了什么Link to my invoice render

Answer 1

如果你没事的话，试试这个。图像将放置在div的中心。

<div class = "logo">
  <img align="right" src="https://cdn.shopify.com/s/files/1/1212/3100/files/logo.png?14279783622096777710" width="30%" height="30%"><br clear="all">
</div>

.logo {
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
}

<div class="table">
<table>
  <colgroup>
    <col class="fifty" />
    <col class="twenty" />
    <col class="thirty" />
  </colgroup>
  <tbody>
    <tr>
      <td></td>
      <td>Invoice Date</td>
      <td>{{ shop_name }}</td>
    </tr>
    <tr>
      <td></td>
      <td>Date {{created_at | date: "%d/%m/%y" }}</td>
      <td>{{ shop.address }}</td>
    </tr>
  </tbody>
</table>
</div>

.table {
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
}

Answer 2

看起来您的代码没有任何问题，表格的第一列只是空的，并且width: 50%样式上有colgroup.fifty。这让桌子看起来像是向右推。

请在此处查看带有背景颜色的笔，以使其更清晰：https://codepen.io/lauraeddy/pen/zPYKva

如何在html中放置没有文本的图像

2 个答案: