Есть ли способ выровнять текст в нижнем правом и левом углах? - PullRequest
Новая
       23

Есть ли способ выровнять текст в нижнем правом и левом углах?

0 голосов
/ 03 января 2019

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

например

ЯНВАРЬ (нижний левый угол) / 2019 (нижний правый угол)

Кто-нибудь может мне помочь с HTML-кодом для этого?

Спасибо!

Ответы [ 4 ]

0 голосов
/ 03 января 2019

Я привел пример использования bootstrap (https://getbootstrap.com). Если вы пытаетесь реализовать липкий нижний колонтитул, это простой и понятный способ выполнить ваш запрос.

https://jsfiddle.net/giacomorock/e6p7cbjz/2/

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f5f5f5;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col">
      Test sticky footer
    </div>
  </div>
</div>
<div class="footer">
  <div class="container">
    <span class="float-left">January</span>
    <span class="float-right">2019</span>
  </div>

</div>
0 голосов
/ 03 января 2019

Версия с position: absolute (для старых браузеров). 

.footer {
  height: 200px;
  background-color: teal;
  position: relative;
}
.footer span {
  position: absolute;
  bottom: 5px;
}
.footer span:first-child {
  left: 5px;
}
.footer span:last-child {
  right: 5px;
}
.footer span:last-child a {
  font-weight: 600;
  color: #FFD500;
}
.footer span:last-child {
  right: 5px;
}
.footer span a {
  color: white;
  text-decoration: none;
}
.footer span a:hover {
  color: blue;
}
<div class="footer">
  <span><a href="https://www.google.com" target="_blank">JANUARY</a></span>
  <span><a href="https://www.bing.com" target="_blank">2019</a></span>
</div>
0 голосов
/ 03 января 2019

Flex не работает в IE9 и некоторых других браузерах, которые я бы использовал: 

.wrapper {
  height: 300px;
  border: 1px solid green;
  border-radius: 4px;
  position:relative;
}

.wrapper span:first-child { 
    bottom: 0;
    left:0;
    position: absolute;
    padding: 10px 15px;
}

.wrapper span:last-child { 
    bottom: 0;
    right:0;
    position: absolute;
    padding: 10px 15px;
}
<div class='wrapper'>
  <span>JANUARY</span>
  <span>2019</span>
</div>

Кроме того, если вы хотите просто указать заголовок и нижний колонтитул веб-сайта, вы можете просто добавить CSS в 2 интервала. 

.span_left { 
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px 15px;
}

.span_right {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 10px 15px;
}
<div class='wrapper'>
  <span class="span_left">JANUARY</span>
  <span class="span_right">2019</span>
</div>
0 голосов
/ 03 января 2019

Пожалуйста, проверьте этот JSfiddle: ссылка

Я использую flexbox для выравнивания. 

.wrapper {
  height: 300px;
  background: green;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
<div class="circle">
</div>

<div class='wrapper'>
  <span>JANUARY</span>
  <span>2019</span>
</div>
...