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>

我尝试了多种方法来使其正常工作，但反应却不明显。我可以实现两种布局中的任何一种。我的问题是：有没有办法使前四列如上所示响应，并在不使用任何JS的情况下将最后一列固定在右侧？

非常感谢您的帮助。

Answer 1

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

此外，用户可以使用媒体查询来更改内容的宽度，具体取决于用户窗口的宽度。

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