Я пытаюсь сделать так, чтобы теги 2 h1 не перекрывали друг друга, но имели разную высоту на одной линии - PullRequest
Новая
       3

Я пытаюсь сделать так, чтобы теги 2 h1 не перекрывали друг друга, но имели разную высоту на одной линии

0 голосов
/ 22 апреля 2020

Как я уже сказал в заголовке, я пытаюсь разместить два тега h1 на одной линии, рядом друг с другом, но иметь разную высоту. По сути, я пытаюсь сделать это https://imgur.com/a/WqlobqC

Но пока я был безуспешным

На данный момент я смог поставить его там, где я хочу это, но это накладывается, так что это проблема.

Я, честно говоря, не знаю, что делать дальше. 

<html>
   <head>  <title> Esercizio </title>
       <meta charset="UTF-8">
   <style type=text/css>

      body{        }

      p    { letter-spacing: 0.1em;
               word-spacing: 2mm;
           }

      i    {       }

      h1{ background-color: #EAEAEA;
          height: 68px;    width:90%;
          padding-left: 3mm;
      text-align: center;
    }


      h1.down { position: absolute;
           top: 5px;  left:100px;
           height: 50px;
           background-color: #EEE; padding-left: 0.5mm;
     text-align: center;
     z-index:2;

       }


   div{width:50%; text-align: right; font-size: 125%;
       background-color: #EE5; padding-right: 0.1mm;
       border-right: dotted 1mm  red;
       border-bottom: dashed 3px  blue;
       border-top; border-left: none;
       float : right;
           }
   </style>
</head>
<body>
  <h1>   Parlando <h1 class=down>Sparlando</h1>

1 Ответ

0 голосов
/ 22 апреля 2020

Не означает, что в вашем коде в целом есть несколько ошибок, которые вы, возможно, захотите перепроверить.

Тем не менее, если мы дадим сегмент, мы будем sh двигаться вниз и, скорее, чем новый h1, мы можем манипулировать им намного проще и аккуратнее. Придание этому периоду относительной позиции, а не абсолютной позиции, которую вы ему дали, позволяет нам переместить его относительно его контейнера.

И наконец, я изменил вашу высоту на высоту строки, чтобы немного лучше отцентрировать текст, подумал, что, возможно, я посмотрю на некоторые свойства flexbox, чтобы он был идеально отцентрирован.

A чуть более элегантным решением может быть смещение диапазона на 3 пикселя, а левого сегмента текста на 3 пикселя, чтобы они были симметричными и центрированными.

Надеюсь, это поможет. 

<html>
   <head>  <title> Esercizio </title>
       <meta charset="UTF-8">
   <style type=text/css>

      body{        }

      p    { letter-spacing: 0.1em;
               word-spacing: 2mm;
           }

      i    {       }

      h1{ background-color: #EAEAEA;
          line-height: 68px;    width:90%;
          padding-left: 3mm;
          text-align: center;
    }


      .down { position: relative;
           top: 15px;  
           height: 50px;
           background-color: #EEE; padding-left: 0.5mm;
     text-align: center;
     z-index:2;

       }


   div{width:50%; text-align: right; font-size: 125%;
       background-color: #EE5; padding-right: 0.1mm;
       border-right: dotted 1mm  red;
       border-bottom: dashed 3px  blue;
       border-top; border-left: none;
       float : right;
           }
   </style>
</head>
<body>
  <h1>   Parlando <span class=down>Sparlando</span></h1>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...