有没有办法在右下角和左下角对齐文本？答案

【问题标题】：Is there a way align text in both bottom right and left corners?有没有办法在右下角和左下角对齐文本？
【发布时间】：2019-01-03 14:07:29
【问题描述】：

我正在尝试创建对齐文本，使其位于页面的右下角和左下角，作为页脚。

例如

1 月 （左下角） / 2019 （右下角）

谁能帮我写一下 HTML 代码？

谢谢！

【问题讨论】：

请添加一些您已经尝试过的代码并在此处描述您的问题。
添加一些代码以便审查:)

标签： html css sticky-footer text-alignment

【解决方案1】：

请检查这个 JSfiddle：link

我正在使用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>

【讨论】：

感谢 Lukasz，但它仍然位于页面顶部——我需要它作为页脚。
要使整个包装器位于页面底部，我需要了解整个上下文和周围的 html 元素。您可以使用。位置：固定；底部：0 到整个包装器，因此它将始终处于底部浮动状态。您可以使用 position: absolute 等，但很大程度上取决于您网页的 html 结构。

【解决方案2】：

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>

【讨论】：

【解决方案3】：

我使用引导程序 (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>

【讨论】：

【解决方案4】：

带有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>

【讨论】：

谢谢！另一个问题...您是否知道将两个单词超链接到单独页面的 HTML 代码，这样就没有文本装饰（没有下划线），但只有在将鼠标悬停在每个单词上时才会将颜色变为蓝色？
更新了上面的解决方案。
只有左边的字有效.....
BLANKPAGE.com/NAME">NAME</span> BLANKPAGE.com/NEW-WORK">WORK</span>
正文>