Как настроить расположение двух элементов html? - PullRequest
Новая
       9

Как настроить расположение двух элементов html?

0 голосов
/ 03 августа 2020

Я пытаюсь отрегулировать положение двух HTML Элементов. У меня есть один элемент HTML для отображения сгенерированного текста «ASCII». Другой - для отображения тега со ссылкой HREF. Я хочу, чтобы тег отображался под напечатанным текстом «ASCII». Однако похоже, что он печатается рядом с ним, а я не хочу этого.

Мой HTML код выглядит следующим образом: 

    *, *:before, *:after {
      border: 0;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font: 16px "Helvetica Neue", Helvetica, sans-serif;
      line-height: 1;
      background-color: black;
    }
    
    .container {
      overflow: hidden;
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: center;
    }
    
    .bypass {
      text-align: center;
      color: linear-gradient(to top, #e7343d 50%, #e7343d 50%);
      color:transparent;
      -webkit-background-clip: text;
      background-clip: text;
      align-items: center;
      justify-content: center;
    }
    
    .rainbow {
    
      background-image: linear-gradient(to top, #e7343d 50%, #61d6d6 50%);
      color:transparent;
      -webkit-background-clip: text;
      background-clip: text;
    }
    
    .ascii {
      display: none;
    }
    <!DOCTYPE html>
    
    
      
      Brrrrrr
      
      
             @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
      
    
    
      
        
           ______            __               _
          / ____/_  ______  / /_  ____  _____(_)___ _
         / __/ / / / / __ \/ __ \/ __ \/ ___/ / __ `/
        / /___/ /_/ / /_/ / / / / /_/ / /  / / /_/ /
       /_____/\__,_/ .___/_/ /_/\____/_/  /_/\__,_/
                  /_/
  • Дом
src = "script. js">

1 Ответ

1 голос
/ 03 августа 2020

вы можете использовать следующий код для печати текста на следующей строке

Удалите этот код 

.ascii {
   display: none;
 }

Добавить этот код 

.rainbow { flex-flow: row wrap; }

Добавьте новый div с между двумя элементами 

<code><pre class="ascii ascii-0">..
..

Добавить CSS в новый div 

.break { 
  flex-basis: 100%;
  width: 0px;
  height: 0px;
  overflow: hidden;
}

Обновить

, поскольку я получил файл js, прикрепленный к проекту, это можно решить с помощью следующих шагов:

шаг 1: переместите div с id = text вверх и добавьте div с классом .break 

<code><pre class="ascii ascii-0">...
... ...
...

шаг 2: Добавьте класс .break и добавьте код в класс .rainbow, как указано выше. Не снимать 

.ascii { display: none }

Проверьте Jsfiddle здесь

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

Нет похожих вопросов

...