CSS 页脚格式答案

【问题标题】：CSS footer formattingCSS 页脚格式
【发布时间】：2017-03-28 10:41:34
【问题描述】：

我的 CSS 页脚有几个问题。请在整页中运行此 sn-p 以查看它在更大的显示器上的布局（稍后我将使其具有响应性。现在，请使用整页）。

.small col-md-3 {
  font-size: .8em
}
.footer-distributed {
  background-color: #34385E;
  width: 100%
}
.footer-distributed .footer-links {
  color: #ffffff;
}
.footer-distributed .footer-links a {
  line-height: 1.8;
  color: inherit;
  padding: 0 2em;
}
.footer-distributed .footer-left-bar {
  border-left: solid;
  color: #FFFFFF;
}
footer {
  position: fixed;
  bottom: 0;
}

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
</head>

<body>
  <footer class="footer-distributed">
    <div class="row" style="height: 1em"></div>
    <div class="row">
      <div class="col-md-3">
        <p class="footer-links">
          <a href="#">Link Number 123</a>
          <a href="#">Link Number 2</a>
          <a href="#">Link Number 3</a>
          <a href="#">Link Number 4</a>
        </p>
      </div>
      <div class="col-md-6 footer-left-bar">
        <div class="row footer-links">
          <div class="col-md-6">
            <p>This information is</br>
              always three</br>
              lines long
            </p>
          </div>
        </div>
      </div>
      <div class="col-md-3 footer-left-bar">
        <div class="row footer-links">
          <div class="col-md-6">BRANDING 1</div>
          <div class="col-md-6">BRANDING 2</div>
        </div>
      </div>
    </div>
    <div class="row" style="height: 1em"></div>
  </footer>

</html>

左侧的 4 个链接。无论文本在其中多长时间，我都希望它们位于 2x2 网格的左对齐单元格中。如您所见，链接 2 被推到右侧，因为链接编号 123 太长。
右侧的 2 品牌链接。我希望它们并排并垂直居中，以便白色分隔条与中心列左侧较长的白色分隔条相匹配。

任何人都可以提供有关如何完成此操作的任何提示吗？谢谢！！

【问题讨论】：

嘿，好建议！我应该看到那些。我会试试看，谢谢。
嗯...我猜评论/答案已被删除。但是，效果很好！建议是： 1. 在左侧使用 2/2 的行和列网格来分隔项目。 2.在中心块的两侧使用白边线，而不是试图在中心块和右侧块上做左边距线。垂直居中仍然不是很好，所以我可能会弄乱其他答案来尝试一下。谢谢！

标签： html css twitter-bootstrap grid footer

【解决方案1】：

嗯...我猜评论/答案已被删除。但是，效果很好！建议是：

在左侧使用 2/2 的行和列网格来隔开项目。
在中心块的两侧使用白色边缘线，而不是试图在中心和右侧做左边距线块。

垂直居中仍然不是很好，所以我可能会弄乱其他答案来尝试一下。谢谢！

【讨论】：

【解决方案2】：

这是一个稍微重写的代码，没有使用 Bootstrap（当然，它仍然被加载，但没有用于实际的页脚）。

footer {
 background-color: #34385E;
  color: #FFF;
  position: fixed;
  bottom: 0;
  width: 100%;
  min-height: 7em;
  box-sizing: border-box;
  padding: .5em 0;
}
footer ul {
  list-style-type: none;
}
.footer-links a {
  line-height: 1.8;
  color: inherit;
  width: 100%;
}
#footer-container div:nth-of-type(2) {
  border-left: solid;
  padding-left: 1em;
  display: flex;
  flex: 2 1 0;
}
#footer-container div:nth-of-type(2) p {
  flex: 1 1 0;
  margin: auto;
}
#footer-container div:first-of-type {
  max-width: 30%;
}
#footer-container div:first-of-type ul {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
  }
#footer-container div:first-of-type ul li {
  flex: 1 1 50%;
  display: block;
  margin: auto;
}
#footer-container {
  display: flex;
  min-height: 7em;
}
#footer-container div {
  flex: 2 1 0;
}
#footer-container div:last-of-type {
  margin: auto;
  border-left: solid;
  flex: 1 1 0;
}
#footer-container div:last-of-type ul li {
  display: inline-block;
 }

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
</head>

<body>
  <footer>
   <div id="footer-container">
    <div>
        <ul class="footer-links">
          <li><a href="#">Link Number 123</a></li>
          <li><a href="#">Link Number 2</a></li>
          <li><a href="#">Link Number 3</a></li>
          <li><a href="#">Link Number 4</a></li>
        </ul>
    </div>
      <div>
        <p>This information is<br>
              always three<br>
              lines long
        </p>
      </div>
      <div>
        <ul>
          <li>BRANDING 1</li>
          <li>BRANDING 2</li>
        </ul>
      </div>
    </div>
  </footer>

</html>

【讨论】：

感谢您在此答案上的辛勤工作！恐怕这个项目禁止绝对职位。不过看起来不错！
那太糟糕了。不过请注意：绝对定位只是为了确保第一个<ul>，即包含四个链接的那个，垂直定位在中间。如果您决定使页脚更高，和/或向列表添加更多链接，它也将起作用。它仍然会以<ul> 为中心。因此，如果纯粹是出于武断的原因而存在“无绝对定位”，则可能会反对。由于<footer> 已经是position: fixed;，因此绝对定位也只会影响页脚内的内容，所以...
我稍微更新了代码，因为我没有注意到最后一个容器的边框，并且边框没有从上到下。在修订版中修复了该问题。 position: absolute; 可能会丢失，而是与在同一元素上手动设置的 margin-top 一起使用，例如 margin-top: 1em; 或 margin-top: 1.5em; 应该可以工作。

【解决方案3】：

只需在您的 HTML 中添加 <div>：

     <p class="footer-links">
      <div class= 'footer-left-container'>
      <div class= 'option'><a href="#">Link Number 123</a></div>
      <div class= 'option'><a href="#">Link Number 2</a></div>
      <div class= 'option'><a href="#">Link Number 3</a></div>
      <div class= 'option'><a href="#">Link Number 4</a></div>
      </div>
    </p>

添加你的 CSS：

.footer-left-container{ overflow: auto; margin-left: 10px; }
.option{  width: 130px; float: left; margin-top: 1px; margin-left: 2px; }

至于你的第二个问题，我不明白你到底需要什么。

【讨论】：