CSS页脚网格响应

Question

我正在尝试根据客户端屏幕的大小在页脚上制作一个 5 列的网格布局。

如果屏幕大于宽度 x，则列彼此相邻。如果屏幕小于宽度 x，则将前 4 列分成 2 列，从而创建 2 行，而第 5 列保持其宽度。

另外，第5列的宽度固定为438px，而前两列的宽度取决于屏幕的大小，所以填充了窗口的剩余宽度。下面我说明了我想要的结果：

下面，我列出了我的 CSS 和 HTML：

.cont-links{
  padding: 20px;
}

.links{
  background-color: #1481BA;
}

.links .links-wrapper{
  display: table-row-group;
}

.links .footer-nav-wrapper{
  display: table;
  overflow: hidden;
  table-layout: fixed;
  width: 100%;
}

// .links .footer-nav-wrapper .first-two-wrap, .links .footer-nav-wrapper .last-two-wrap{
//   display: table-cell;
// }

.links .footer-nav-wrapper .link-group{
  display: table-cell;
  width: 50%;
  padding-right: 20px;
}

.links span{
  display: block;
  padding: 20px 0px;
}

.links .footer-nav-wrapper .link-group > .footer-link-wrapper{
  padding: 20px 0px 0px 0px;
}

.links span:first-child{
  border-bottom: 2px solid #63CCCA;
}

.links a{
  color: #fff;
  font-weight: 100;
}

.links .title{
  text-transform: uppercase;
}

.links .connect{
  width: 418px;
  display: table-cell;
}

.links .connect span{
  display: block;
}

.links .connect .logo{
  height: 80px;
  float: none;
  margin-top: 20px;
  margin-bottom: 10px;
}

.links .connect .title-follow-us-wrapper{
  padding: 20px 0px 10px 0px;
}

.links .connect .footer-social-icons-wrapper img{
  height: 71px;
  width: 71px;
}

<footer>
  <section class="links">
    <div class="cont cont-links">
      <div class="links-wrapper">
        <div class="footer-nav-wrapper">

            <div class="link-group about">
              <span><a href="about/index.php" class="title">About</a></span>
              <span class="footer-link-wrapper"><a href="about/whatistechpocket/index.php" class="link-1">What is TechPocket?</a></span>
              <span class="footer-link-wrapper"><a href="about/whoarewe/index.php" class="link-2">Who Are We</a></span>
              <span class="footer-link-wrapper"><a href="about/team/index.php" class="link-3">Meet The Team</a></span>
            </div>
            <div class="link-group community">
              <span><a href="#" class="title">community</a></span>
              <span class="footer-link-wrapper"><a href="blog/index.php" class="link-1">Blog</a></span>
              <span class="footer-link-wrapper"><a href="forum/index.php" class="link-2">Forum</a></span>
              <span class="footer-link-wrapper"><a href="youtubevideos/index.php" class="link-3">TechPocket</a></span>
            </div>

            <div class="link-group support">
              <span><a href="support/index.php" class="title">Support</a></span>
              <span class="footer-link-wrapper"><a href="donate/index.php" class="link-1">Donate</a></span>
              <span class="footer-link-wrapper"><a href="report/index.php" class="link-2">Report An Issue</a></span>
            </div>
            <div class="link-group contact-us">
              <span><a href="contactus/index.php" class="title">Contact Us</a></span>
              <span class="footer-link-wrapper"><a href="contactus/index.php" class="link-1">Leave A Message</a></span>
              <span class="footer-link-wrapper"><a href="privacy/index.php" class="link-2">Privacy Policy</a></span>
              <span class="footer-link-wrapper"><a href="terms/index.php" class="link-3">Terms Of Service</a></span>
            </div>

        </div>
        <div class="connect">
          <span><a href="#" class="title">Connect With Us</a></span>
          <div class="logo"></div>
          <div class="brief-page-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam dictum semper lorem sed sollicitudin. Nunc eleifend
suscipit erat, fringilla ornare justo pretium nec. Proin sit
amet massa nec massa pellentesque rutrum non sit amet arcu.</div>
          <span class="title-follow-us-wrapper"><a href="#" class="title title-follow-us">Follow Us:</a></span>
          <div class="footer-social-icons-wrapper">
            <a href="https://www.facebook.com/techpocketofficial" target="_blank"><img src="views/css/facebook-logo.png" alt="FB" class="fb-logo"></a>
            <a href="https://twitter.com/techpocket1" target="_blank"><img src="views/css/twitter-logo.png" alt="Twitter" class="twitter-logo"></a>
            <a href="https://plus.google.com/+techpocketvideo" target="_blank"><img src="views/css/google-icon.png" alt="Google+" class="google-logo"></a>
          </div>
          <div class="social"></div>
        </div>
      </div>
    </div>
  </section>
</footer>

我已经尝试了多种方法来让它发挥作用，但没有得到回应。我要么实现这两种布局中的任何一种。我的问题是：有没有一种方法可以使前 4 列响应如上所示，并在不使用任何 JS 的情况下将最后一列固定在右侧？

非常感谢您的帮助。

Answer 1

您可以使用display:flex; 属性来固定.connect 的宽度，并使另一个部分宽度自适应。

此外，用户可以使用媒体查询来改变某些东西的宽度，这取决于用户窗口的宽度。

这是您的代码：https://jsfiddle.net/ou6n9xs0/42/