Блог

Главная - Вопросы по программированию - написание имени автора в конце заголовка в css

написание имени автора в конце заголовка в css

#css

#css

Вопрос:

Мой HTML-код:-

 <div class='store_detail-level1'>
    <span class='book_name'>How To Avoid Climate Disaster</span>
    <br>
    <span class='author_name'>Bill Gates</span>
</div>

Я хочу вот так

  How To Avoid Climate Disaster
                             by Bill Gates

Ключевые моменты:-

  1. содержимое класса ‘book_name’ является динамическим, что означает, что оно из базы данных
  2. Он должен быть отзывчивым

Адаптивные средства для мобильного экрана itr могут быть такими:-

 How To Avoid Climate
Disaster
       by Bill Gates

Комментарии:

1. «Это должно быть отзывчивым» — что именно означает? Как вы хотите, чтобы это вело себя, если ширина была настолько мала, что, например, только «by» все равно помещалось бы в одной строке?

2. А что, если само название книги было таким длинным, что оно разбивается на две (или, может быть, даже больше) строки? Скажем How To Avoid Climate , было в строке 1, а Disaster в следующей — где тогда вы хотите выровнять имя автора?

3. теперь я отредактировал его, посмотрите еще раз

4. Создание элемента name встроенным блоком и добавление верхнего поля на полпути работает, jsfiddle.net/1je2c8qy — пока доступная ширина не станет такой, что название больше не будет помещаться рядом с названием книги (поиграйте с шириной, установленной для тела в инспекторе, чтобы посмотреть, как она ведет себя при разной ширине), затем это полеприведет к дополнительной пустой строке между ними.

Ответ №1:

 var divwidth = document.getElementById('getthisid').clientWidth;
document.getElementById("setthisid").style.marginLeft = divwidth 'px'; 
 .store_detail-level1{
  display:inline-block;
} 
 <div id='getthisid' class='store_detail-level1'>
  <div class='book_name_container'>
    <span class='book_name'>How To Avoid Climate Disaster</span>
  </div>
    
  <div id='setthisid' class='author_name_container'>
    <span class='author_name'>by Bill Gates</span>
  </div>
</div>

Метки: