可扩展查看和自动调整大小的HTML文档

我想用基本的HTML5，没有JS和简单的电子邮件邀请我。可扩展查看和自动调整大小的HTML文档

我得到以下工作到一定程度。我在顶行有3个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>

来源

2016-11-08 phil

没有工作的例子，我不能肯定，但这种情况的最常见的原因之一是元素之间的空白。

尝试要么投入一行的图像元素不带空格

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

或者使用注释为“隐藏”白色空间：

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

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

例子：

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

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>

来源

2016-11-08 12:14:01 DBS

谢谢你做到了，正确地对接的IMGS。这个利润率应该让我感到吃惊 – phil

可扩展查看和自动调整大小的HTML文档

回答

相关问题