выравнивание интервала по вертикали влево

#html #css

#HTML #css

Вопрос:

Я пытаюсь выровнять левую часть span по правому концу предыдущего span, но это не работает.

Вот упрощенный пример: https://jsfiddle.net/regc/udjgufrz /

 <span class="big">start big</span>
<span class="small">continue with smaller ones. continue with smaller ones. continue with smaller ones. </span>

Я бы хотел, чтобы меньший текст был выровнен по вертикали справа от большего.

 BIGGER smaller text
       smaller text

Я пытался использовать divs, но в этом случае меньший текст начинается с новой строки.

Ответ №1:

Проверьте приведенную ниже обновленную скрипку, надеюсь, это поможет.Я использовал position:absolute;

демонстрация скрипки span по вертикали по левому краю

1. спасибо, рад помочь. Я добавил дополнительное поле для хорошего внешнего вида . Вы можете настроить его как свой собственный. 🙂

2. Да, это поле было отличным штрихом, именно то, что мне было нужно!

Ответ №2:

Просто простое добавление float:left для .big класса.

 .big {
  font-size:50px;
  float:left;
  margin-right:10px;
}

https://jsfiddle.net/udjgufrz/3/

Ответ №3:

Хорошо, с вертикальным выравниванием это может быть так:

 .wrap span {
  display: inline-block; vertical-align: middle; width:49.5%;
}
.big {
  font-size:50px;
}

.small {
  font-size:30px;
}

 <div>
  <p>here it is:</p>
  <div class="wrap">
      <span class="big">start big</span>
      <span class="small">continue with smaller ones. continue with smaller ones. continue with smaller ones. </span>
  </div>
</div>

Но я бы использовал Flexbox . Это вариант?