Question

我正在尝试使用基本的HTML5，没有JS和我这么简单的电子邮件邀请。

我得到以下工作到一定程度。我在顶行有3个JPG，在下一个文本中有2个JPG。一切都会调整，直到变得非常小。例如，我的iPad将最后一个JPG放在下一行的顶行。等

我将宽度百分比减少到每行总计不到100％，这有助于某一点。但是当我把它缩小到可能的手机屏幕大小时，就会出现溢出跳跃。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta name="viewport" content="initial-scale=1">
    <style type="text/css">
      p { color: #000000 }
    </style>
  </head>
  <body lang="en-US" text="#000000" dir="ltr" style="background: transparent">
    <span class="sd-abs-pos" style="position: relative">
      <img src="data:image/png;base64,data"
           name="a1" width="16.66%" border="0">
      <img src="data:image/png;base64,data"
           name="a2" width="16.66%" border="0">
      <img src="data:image/png;base64,data"
           name="a3" width="33%" border="0">
      <img src="data:image/png;base64,data"
           name="a4" width="33%" border="0">
      <img src="data:image/png;base64,data"
           name="b1" width="33%" border="0" style="margin-left: 16.66%">
      <img src="data:image/png;base64,data"
           name="b2" width="33%" border="0">
    </span>
    <p align="center" style="margin-top: 3vw; margin-bottom: 5vw">
      <font face="Baoli SC"><font style="font-size: 5vw">
        100 Schools<br>
        Invites you to the opening of it's<br>
        50<sup>th</sup>
        School in<br>
        etc<br>
        November 28, 2016 
        </font></font>
    </p>
  </body>
</html>

Answer 1

如果没有一个有效的例子，我无法确定，但其中一个最常见的原因是元素之间存在空白。

尝试将图像元素放在没有空格的行中

<img src="" width="33%" /><img src="" width="33%" /><img src="" width="33%" />

或使用评论＆＃34;隐藏＆＃34;白色空间：

<img src="" width="33%" /><!--
--><img src="" width="33%" /><!--
--><img src="" width="33%" />

这是因为虽然白色空间已折叠，但它会留下一个空格。由于您的元素留有1％备用（33％* 3 = 99％），如果这些空间小于宽度的1％，它将正确显示。然而，在空间占据宽度超过1％的小屏幕上，它们会将最后一个元素推到一个新线。

示例：

＆＃13;

.box{
  display: inline-block;
  width: 33%;
  height: 20px;
  background-color: #555;
}

＆＃13;

With white-space
<div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
Without white-space (inline)
<div>
  <div class="box"></div><div class="box"></div><div class="box"></div>
</div>
Without white-space (comments)
<div>
  <div class="box"></div><!--
  --><div class="box"></div><!--
  --><div class="box"></div>
</div>

＆＃13;

用于可伸缩查看和自动调整大小的HTML文档

1 个答案: