HTML doc для масштабируемого просмотра и автоматического изменения размера

Я пытаюсь получить приглашение по электронной почте с basic HTML5, no JS и так же просто, как я.

Я получил следующее, чтобы работать в степени. У меня есть 3 JPG в верхнем ряду и 2 в следующем затем тексте. Все изменяется, пока не становится действительно маленьким. Например, мой 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>

1 ответ

  1. Я не могу быть уверен без рабочего примера, но одна из наиболее распространенных причин этого-пустое пространство между элементами.

    Попробуйте либо поместить элементы изображения в линию без пробелов

    <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>