可擴展查看和自動調整大小的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文檔

回答

相關問題