CSS 页脚网格响应

Question

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

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

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

下面，我列出了我的 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 宽度，并使其他部分宽度自适应。

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

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

CSS 页脚网格响应

CSS Footer grid responsive

html

css

grid

layout

footer