Question

我正在尝试创建对齐文本，以使其位于页面的右和左中。

例如

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

有人可以为此提供HTML代码吗？

谢谢！

Answer 1

请检查此JSfiddle：link

我正在使用df <- data.frame(a = sample(LETTERS, 10, replace = FALSE), line_one = rnorm(10, mean = 2, sd = 5), line_two = rnorm(10, mean = 15, sd = 5), d = sample(letters, 10, replace = FALSE)) df %>% tidyr::gather(key = line, value = value, line_one, line_two) %>% ggplot(aes(x = a, y = value, color = line, group = line)) + geom_line() + scale_color_manual( name = NULL, values = c("line_one" = "red", "line_two" = "blue") ) + geom_hline(yintercept = df$line_one %>% quantile(.99), size = 2, color = "tomato", linetype = "dashed", alpha = 0.6)进行对齐。

library(ggplot2)
library(tidyr)
set.seed(1)
df_long <- data.frame(
  x = 1:10,
  a = rnorm(10),
  b = rnorm(10),
  c = rnorm(10),
  d = rnorm(10)
) %>% 
  gather(key = key, value = y, -x)

ggplot(mapping = aes(x = x, y = y, fill = key, color = key)) +
  geom_col(data = subset(df_long, key %in% "a")) +
  geom_line(data = subset(df_long, key %in% c("b", "c"))) +
  geom_point(data = subset(df_long, key %in% "d"))

flexbox

Answer 2

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

Answer 3

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添加到这两个范围中。

.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>

Answer 4

我已经使用引导程序（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 个答案: