Элемент блока HTML перемещается (меняет поля) после обновления - PullRequest
Новая
       34

Элемент блока HTML перемещается (меняет поля) после обновления

0 голосов
/ 20 октября 2019

У меня есть два блочных элемента внутри блока inline-block, один из которых является вертикальной линией, как показано на рисунке здесь.

Вот код для справки 

.corner:before {
  display: block;
  width: 1px;
  min-height: 7vw;
  background: black;
  content: '';
  margin-top: -10px;
  margin-left: 50%;
}
<div class="corner" style="display: inline-block;">

  <h3 style="font-family: Italianno; 
                   writing-mode: vertical-rl; 
                   transform: rotate(180deg);
                   font-size: 3vw;
                   letter-spacing: 0.15em;
                   ">
    Sorority
  </h3>
</div>

Тем не менее, при обновлении страницы линия выравнивается и выглядит как this

Строка перестраивается только самапосле изменения размера страницы или при вызове alert. Я пытался вызвать windows.focus () при загрузке страницы, но все еще не играли в кости.

В чем здесь проблема?

РЕДАКТИРОВАТЬ: ошибка НЕ ​​появляется в Google Chrome, но только наFireFox

1 Ответ

0 голосов
/ 20 октября 2019 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>
            design
        </title>
        <style>
    .corner{
    font-family: Italianno; 
    writing-mode: vertical-rl; 
    transform: rotate(180deg);
    font-size: 3vw;
    letter-spacing: 0.15em;
    position:relative;
    }
    .corner:before{
    display:block;
    width: 1px;
    min-height: 7vh;
    background: black;
    content: '';
    position:absolute;
    bottom:-7vh;
    left:50%;
            }
        </style>
    </head>
    <body>

    </body>
</html>

  <div style="display: inline-block; margin-top:7vh;" >
    <h3  class='corner'>
      Sorority
    </h3>
  </div>

Попробуйте использовать относительные и абсолютные позиции. Это предотвратит повторное выравнивание линии на разных портах просмотра.

Я выделю некоторые проблемы, которые следует рассмотреть здесь: рассмотрите возможность использования 'em' и 'px' для измерения размера шрифта и высоты / ширины. ,Кроме того, в min-height: 7vw; в вашем коде это должно быть min-height: 7vh; (высота порта просмотра). Проблема с использованием vh и vw заключается в том, что это приведет к растяжению ваших элементов на разных портах просмотра. Но если вы измените все на px или 'em', вы получите четко определенный поэтапный контент. Если вы хотите решить проблему порта адаптивного просмотра при использовании em или px, сделайте контейнер div, содержащий элемент отзывчивым, используя «%»;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...