Question

我的CSS页脚中有几个问题。请在整页中运行此片段以查看它在更大的显示屏上的显示方式（稍后我将对其进行响应。现在，请使用整页）。

.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个品牌链接。我希望它们并排并垂直居中，以使白色分隔条与中间列左侧较长的白色分隔条匹配。

任何人都可以提供有关如何实现这一目标的任何提示吗？谢谢!!

Answer 1

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

＆＃13;

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;
 }

＆＃13;

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

＆＃13;

Answer 2

只需在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; }

关于你的第二个问题，我无法理解你究竟需要什么。

Answer 3

嗯...我想评论/答案已被删除。但是，它很棒！建议是：

使用2/2行的网格＆amp;左侧的列将空间隔开项目。
在中间块的两侧使用白色边缘线，而不是试图在中间和右边做左边缘线块。

垂直居中仍然不是很好，所以我可能会有额外的答案来试试这个。谢谢！

CSS页脚格式

3 个答案: