如何在 FreeMarker 上将图像右对齐

Question

我正在尝试对齐页面右侧的最后一张图片，以使其看起来像对称

我在 FTL 上使用的代码如下，但它总是在中间部分旁边：

            <table class="header">
                <tr>
                    <td align="left" valign="middle">
                        <img src="${logo1}" style="float: left; margin: 7px; width: 120px; height: 67.5px" /> 
                    </td>
                    <td align="left" valign="middle" style=" margin-left: 50px;">
                        <span class="infos" style="font-size:17pt"><b>${info}</b></span><br/>
                    </td>
                    <td align="right" valign="right">
                        <img src="${lastLogo}" style="float: right; margin: 7px; width: 120px; height: 67.5px" />
                    </td>
                </tr>
            </table>

Answer 1

如果您让 table 占据 100% 的宽度，它就会如您所愿。

<table class="header" style="width: 100%">
  <tr>
    <td align="left" valign="middle">
      <img src="${logo1}" style="float: left; margin: 7px; width: 120px; height: 67.5px" />
    </td>
    <td align="left" valign="middle" style=" margin-left: 50px;">
      <span class="infos" style="font-size:17pt"><b>${info}</b></span><br/>
    </td>
    <td align="right" valign="middle">
      <img src="${lastLogo}" style="float: right; margin: 7px; width: 120px; height: 67.5px" />
    </td>
  </tr>
</table>

Answer 2

下面是一个示例，但不要那样使用样式内联。我们目前使用表格作为表格数据，否则我们在 div.

上创建所有内容

*,
 :after,
 :before {
  box-sizing: border-box;
}

<table class="header">
  <tr>
    <td>
      <img src="https://fakeimg.pl/120x60/ff0000/fff" style="width: 120px;" />
    </td>
    <td>
      <div class="infos" style="border: 1px solid red; padding: 0 20px; font-size:17px; max-width: 120px;">
        <b>Lorem ipsum dolor sit.</b>
      </div>
    </td>
    <td>
      <img src="https://fakeimg.pl/120x60/4efc03/000" style="width: 120px;" />
    </td>
  </tr>
</table>

更好的解决方案

*,
 :after,
 :before {
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
}

.header img {
  width: 120px;
}

.infos {
  display: flex;
  align-items: center;
}

<div class="header">
  <div><img src="https://fakeimg.pl/120x60/ff0000/fff"></div>
  <div class="infos">
    <b>Lorem ipsum dolor sit.</b>
  </div>
  <div><img src="https://fakeimg.pl/120x60/4efc03/000"></div>
</div>

如何在 FreeMarker 上将图像右对齐

How to align image to right on FreeMarker

html

css

freemarker