Блог

Главная - Вопросы по программированию - Как я могу отображать элементы в крайних левой и правой частях страницы?

Как я могу отображать элементы в крайних левой и правой частях страницы?

#html #css #frontend #alignment #display

Вопрос:

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

Макет, который я хочу, выглядит следующим образом:

IMG1

Однако нижний колонтитул в настоящее время выглядит следующим образом:

IMG2

Вот что я закодировал.

 .footer-top {
  display: inline-block;
  width: 100%;
}

.title {
  float: left;
}

.social {
  float: right;
} 
 <div class="footer-top">
  <div class="name">
    <h1><span class="bigger">XXXX</span></h1>
  </div>
  <div class="social">
    <!--Social media icons-->
    <a href="#" class="fa fa-facebook"></a>
    <a href="#" class="fa fa-instagram"></a>
  </div>
</div>

В чем моя ошибка?

Ответ №1:

Вы можете использовать display:flex; для оформления навигационной панели. Скопируйте этот код и вставьте в свой CSS вместо предоставленного вами кода.

 .footer-top {
   display:flex;
  justify-content:space-between;
  align-items:center;
} 
 <div class="footer-top">
  <div class="name">
    <h1><span class="bigger">XXXX</span></h1>
  </div>
  <div class="social">
    <!--Social media icons-->
    <a href="#" class="fa fa-facebook">fb</a>
    <a href="#" class="fa fa-instagram">insta</a>
  </div>
</div>

Ответ №2:

Причина, по которой ваш макет оказался не таким, как вы ожидали, заключается в том, что у вас был .name html, но .title в css. Исправьте имя класса, и поплавки также будут работать. Также нет необходимости иметь display: inline-block и width: 100% . <div> по умолчанию является блоком и занимает 100% ширины.

Тем не менее, с flex его помощью легче выровнять контент по вертикали.

 .title {
    float: left;
}

.social {
    float: right;
} 
 <div class="footer-top">
    <div class="title">
        <h1><span class="bigger">XXXX</span></h1>
    </div>
    <div class="social">
         <!--Social media icons-->
        <a href="#" class="fa fa-facebook">icon</a>
        <a href="#" class="fa fa-instagram">icon</a>
    </div>
</div>
Метки: