Отрегулируйте высоту строки многолинейного пролета в div - PullRequest
Новая
       1

Отрегулируйте высоту строки многолинейного пролета в div

0 голосов
/ 28 июня 2018

Что мне нужно, так это:
1. высота линии между синими линиями составляет 5 пикселей.
2. высота линии между синей, черной и коричневой линиями составляет 20 пикселей.
Пожалуйста, посмотрите код, который я пробовал. Я не мог понять, что случилось. 

<!DOCTYPE html>
<html>
<head>
<style>
.divClass{
  overflow-y: auto;
  width: 100%;
  height:100%;
  line-height: 20px; 
}

.divclass span{
	line-height: 5px; 
}
</style>
</head>
<body>
<div class="divClass">
<span style="color:blue;">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</span><br>
<span>second efgh</span><br>
<span style="color:brown;">third hijklmnopqrstuvwxyz</span>
</div>
</body>
</html>

Пожалуйста, помогите спасибо заранее.

Ответы [ 5 ]

0 голосов
/ 28 июня 2018

Спасибо, Юрий, ведущий меня. Ваш ответ помог мне решить проблему. Тем не менее, я хотел бы опубликовать свой разрешенный код с минимальными изменениями. Пожалуйста, найдите исправленный код ниже. Спасибо всем.

Исправления сделаны: заменен span с div и добавлен margin-bottom вместо высоты строки с новыми значениями. 

<!DOCTYPE html>
<html>
<head>
<style>
.divClass{
  overflow-y: auto;
  width: 100%;
  height:100%;
  line-height: 20px; 
}

.divclass div {
    margin-bottom: 100px;
}
</style>
</head>
<body>
<div class="divClass">
<div style="color:blue;">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</div><br>
<div>second efgh</div><br>
<div style="color:brown;">third hijklmnopqrstuvwxyz</div>
</div>
</body>
</html>
0 голосов
/ 28 июня 2018

Вы применили line-height: 5px; к .divclass span

Вы должны указать, для какого диапазона вы хотите этот конкретный CSS если в этом элементе доступно несколько интервалов.

Для этого вы можете использовать span:first-child или добавить класс к этому конкретному диапазону.

Я использовал span:first-child здесь. 

span:first-child{
  line-height: 5px; 
}

span{
  overflow-y: auto;
  width: 100%;
  height:100%;
  line-height: 20px; 
}
<div class="divClass">
<span style="color:blue;">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</span><br>
<span>second efgh</span><br>
<span style="color:brown;">third hijklmnopqrstuvwxyz</span>
</div>

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

0 голосов
/ 28 июня 2018

Вот, пожалуйста, HTML: 

<style>
.divClass{
  overflow-y: auto;
  width: 100%;
  height:100%;
  line-height: 20px; 
}

#blue{
    line-height: 5px; 
}
</style>
</head>
<body>
<div class="divClass">
<div id="blue" style="color:blue;">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz <br>abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</div><br>
<span>second efgh</span><br>
<span style="color:brown;">third hijklmnopqrstuvwxyz</span>
</div>
</body>
</html>

Надеюсь, это то, что вам нужно. Осмотрите элементы, чтобы убедиться, что это правильная высота линии.

0 голосов
/ 28 июня 2018

Наличие line-height: 5px приведет к тому, что ваш текст будет перекрываться, поэтому я думаю, вы хотите, чтобы каждая строка на 5px была далеко друг от друга. Для этого вам нужно сделать line-height 5px больше font-size. «Высота линии между синим черным и коричневым» называется margin (вы также можете использовать padding), и чтобы работать, вы должны установить display: block в span теги 

.divClass{
  width: 100%;
  height: auto;
  font-size: 15px;
}

span { display: block; }

.blue{
  color: blue;
	line-height: 20px; 
}

.brown { color: brown; }

.black, .brown, .blue {margin: 10px 0;}
<div class="divClass">
  <span class="blue">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</span>
  <span class="black">second efgh</span>
  <span class="brown">third hijklmnopqrstuvwxyz</span>
</div>
0 голосов
/ 28 июня 2018 
<!DOCTYPE html>
<html>
    <head>
       <style>
          .divClass{
              overflow-y: auto;
              width: 100%;
              height:100%;
              line-height: 20px; 
          }

          .span-blue{
               line-height: 5px !important; 
           }

           .span-other{
               line-height: 20px !important; 
            }
       </style>
   </head>
   <body>
       <div class="divClass">
          <span style="color:blue;" class="span-blue">first 
             abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz 
             abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</span><br>
         <span class="span-other">second efgh</span><br>
         <span style="color:brown;" class="span-other">third 
            hijklmnopqrstuvwxyz</span>
      </div>
   </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...