Как переместить подразделение в верхний правый угол в CSS

#html #css

Вопрос:

Я хочу переместить подразделение в верхний правый угол. Тег div внутри нижнего колонтитула

это мой HTML-код для нижнего колонтитула:

 lt;footergt;  lt;div class="footer"gt;  lt;brgt;  lt;h1gt;lt;img src="imageedit_2_7258851370.gif"gt; Genius High Schoollt;/h1gt;  lt;brgt;  lt;div class="links"gt;  lt;h1gt;lt;i class="fas fa-link"gt;lt;/igt; Linkslt;/h1gt;  lt;ul class="navtwo"gt;  lt;ligt;lt;a href="index.html"gt;Homelt;/agt;lt;/ligt;  lt;ligt;lt;a href="about.html"gt;Aboutlt;/agt;lt;/ligt;  lt;ligt;lt;a href="academics.html"gt;Academicslt;/agt;lt;/ligt;  lt;ligt;lt;a href="worksheets.html"gt;Worksheetslt;/agt;lt;/ligt;  lt;ligt;lt;a href="circulars.html"gt;Circularslt;/agt;lt;/ligt;  lt;ligt;lt;a href="gallery.html"gt;Gallerylt;/agt;lt;/ligt;  lt;ligt;lt;a href="message.html"gt;Messagelt;/agt;lt;/ligt;  lt;ligt;lt;a href="contact.html"gt;Contactlt;/agt;lt;/ligt;  lt;/ulgt;  lt;/divgt;  lt;div class="tel"gt;  lt;h1gt;lt;i class="fas fa-phone"gt;lt;/igt; Get in touchlt;/h1gt;  lt;brgt;  lt;a class="phone_number" href="tel: 91-934-638-8595"gt; 91-934-638-8595lt;/agt;  lt;brgt;  lt;a class="phone_number" href="tel: 91-970-026-0200"gt; 91-934-638-8595lt;/agt;  lt;brgt;  lt;a class="phone_number" href="email:geints2013@gmail.com"gt;geints2013@gmail.comlt;/agt;  lt;brgt;  lt;brgt;  lt;brgt;  lt;brgt;  lt;/divgt;  lt;/footergt;  

и это мой CSS:

 .footer {  margin-left: 20px; }  .links{  margin-left: 30%; }  .tel {  margin-left: 50%;  font-size: medium; }  .tel a {  color: #0b0069;  text-decoration: none; }  

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

введите описание изображения здесь

Ответ №1:

Вы можете попробовать вот так:

 on1 { background-color:red; }  on2 { background-color:black; position:absolute; right:0px; top:0px; } 
 lt;div class="on1"gt;  lt;div class="on2"gt;lt;/divgt;   lt;/div 

посмотрите на этот скриншот, тогда вы поймете

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

1. это не работает

Ответ №2:

Не совсем понятно, что вы пытаетесь сделать…но я предполагаю, что выровнять все разделы по верху? См. фрагмент ниже.

 footer {  margin-left: 20px;  display: inline-flex; }  .links{  margin-left: 30%; }  .tel {  margin-left: 50%;  font-size: medium; }  .tel a {  color: #0b0069;  text-decoration: none; } 
 lt;!DOCTYPE htmlgt; lt;htmlgt;   lt;headgt;  lt;meta name="viewport"  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" /gt;   lt;/headgt;  lt;bodygt;  lt;footergt;  lt;brgt;  lt;h1gt;lt;img src="imageedit_2_7258851370.gif"gt; Genius High Schoollt;/h1gt;  lt;brgt;  lt;div class="links"gt;  lt;h1gt;lt;i class="fas fa-link"gt;lt;/igt; Linkslt;/h1gt;  lt;ul class="navtwo"gt;  lt;ligt;lt;a href="index.html"gt;Homelt;/agt;lt;/ligt;  lt;ligt;lt;a href="about.html"gt;Aboutlt;/agt;lt;/ligt;  lt;ligt;lt;a href="academics.html"gt;Academicslt;/agt;lt;/ligt;  lt;ligt;lt;a href="worksheets.html"gt;Worksheetslt;/agt;lt;/ligt;  lt;ligt;lt;a href="circulars.html"gt;Circularslt;/agt;lt;/ligt;  lt;ligt;lt;a href="gallery.html"gt;Gallerylt;/agt;lt;/ligt;  lt;ligt;lt;a href="message.html"gt;Messagelt;/agt;lt;/ligt;  lt;ligt;lt;a href="contact.html"gt;Contactlt;/agt;lt;/ligt;  lt;/ulgt;  lt;/divgt;  lt;div class="tel"gt;  lt;h1gt;lt;i class="fas fa-phone"gt;lt;/igt; Get in touchlt;/h1gt;  lt;brgt;  lt;a class="phone_number" href="tel: 91-934-638-8595"gt; 91-934-638-8595lt;/agt;  lt;brgt;  lt;a class="phone_number" href="tel: 91-970-026-0200"gt; 91-934-638-8595lt;/agt;  lt;brgt;  lt;a class="phone_number" href="email:geints2013@gmail.com"gt;geints2013@gmail.comlt;/agt;  lt;brgt;  lt;brgt;  lt;brgt;  lt;brgt;  lt;/divgt;  lt;/footergt;  lt;/bodygt;  lt;/htmlgt; 

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

1. Это не ответ на самом деле, я говорю, что раздел tel находится в нижней части нижнего колонтитула, а раздел ссылок находится выше, я хочу, чтобы раздел tel был на том месте, где находится раздел ссылок, но с правой стороны.

2. Я думаю, вам нужно переформулировать свою проблему или предоставить скриншот с некоторыми аннотациями. На самом деле непонятно, что вы пытаетесь сделать.

3. Я добавил изображение в вопрос, посмотрите, что оно находится в конце изображения, выделенного одним