4 列页脚不为移动设备堆叠

Question

所以基本上我有这个 4 列页脚，它是完美的，但不是为了移动而堆叠，它只是被粉碎了。我只希望每个类别在切换到移动视图后堆叠起来，或者只是在所有尺寸上响应地缩小。我试过设置宽度但没有运气。如有任何帮助或提示，我们将不胜感激！

footer .clear {
  clear: both;
  float: none;
}

footer {
  background: #222;
  overflow: hidden;
  border-top: solid 1px #000;
  padding: 58px 0 0;
  font-family: arial, helvetica, sans-serif;
  line-height: 1.5em;
}

footer p,
footer ul,
footer a,
footer .btn {
  font-family: arial, helvetica, sans-serif;
  line-height: 1.5em;
  text-transform: none;
}

footer li {
  font-size: .875em;
  line-height: 1.5em;
}

footer .btn {
  background: #4497c4;
  background-image: -webkit-linear-gradient(top, #4497c4, #2d6a8e);
  background-image: -moz-linear-gradient(top, #4497c4, #2d6a8e);
  background-image: -ms-linear-gradient(top, #4497c4, #2d6a8e);
  background-image: -o-linear-gradient(top, #4497c4, #2d6a8e);
  background-image: linear-gradient(to bottom, #4497c4, #2d6a8e);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 2px #ffffff;
  -moz-box-shadow: 0px 1px 2px #ffffff;
  box-shadow: 0px 1px 2px #ffffff;
  color: #ffffff!important;
  font-size: 15px;
  padding: 5px 15px 6px 15px;
  border: solid #25658a 1px;
  text-decoration: none;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

footer .content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

@media screen and (max-width: 768px) {
  footer .content {
    padding: 0 10px;
  }
}

footer .last {
  margin-right: 0px !important;
}

@media only screen and (max-width: 485px) {
  footer .last {
    clear: both;
  }
}

#emailsignup {
  float: left;
  width: 330px;
}

#emailsignup .footer-logo {
  display: block;
  width: 155px;
  height: 41px;
  background: url("https://www.proxibid.com/images/footer-logo-proxibid.png") top left no-repeat;
  text-indent: -9999px;
  margin-bottom: 30px;
}

#emailsignup a,
#helpfullinks a,
#social a,
#poweredby a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

#emailsignup p {
  font-size: 13px;
  color: #FFF;
  margin: 0px 0px 16px;
}

#helpfullinks {
  float: right;
}

@media only screen and (max-width: 825px) {
  #helpfullinks {
    float: none;
    clear: both;
  }
}

#helpfullinks div {
  float: left;
  margin-right: 45px;
  width: 20%;
}

#helpfullinks div a {
  display: inline;
  margin-top: -6px;
  margin-bottom: 8px;
}

#helpfullinks p.category {
  color: #FFF;
  font-size: 21px;
  margin: 0 0 14px;
}

#helpfullinks p.category a {
  color: #FFF;
}

#helpfullinks ul {
  list-style-type: none;
  padding: 0px;
  margin: 14px 0 0 0;
}

#helpfullinks li {
  padding: 0px;
  margin: 0 0 6px;
  font-size: 15px;
}

#poweredby {
  max-width: 100%;
  margin: 115px auto 0;
  overflow: hidden;
  text-align: center;
}

@media screen and (max-width: 768px) {
  #poweredby {
    margin: 26px auto 0;
  }
}

#poweredby p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 10px;
  text-align: center;
}

#poweredby ul {
  display: inline-block;
  margin: 0px auto;
  list-style-type: none;
  padding: 0px;
}

#poweredby li {
  margin: 0 40px 0 0;
  float: left;
}

@media only screen and (max-width: 495px) {
  #poweredby li {
    margin: 0 0 10px 0;
    float: none;
    clear: both;
  }
}

#poweredby .footer-divvy {
  display: block;
  width: 77px;
  height: 24px;
  background: url("https://www.proxibid.com/images/footer-logo-divvy.png") top left no-repeat;
  text-indent: -9999px;
}

#poweredby .footer-finest {
  display: block;
  width: 77px;
  height: 24px;
  background: url("https://www.proxibid.com/images/footer-logo-thefinest.png") top left no-repeat;
  text-indent: -9999px;
}

#poweredby .footer-apn {
  display: block;
  width: 77px;
  height: 24px;
  background: url("https://www.proxibid.com/images/footer-logo-apn.png") top left no-repeat;
  text-indent: -9999px;
}

#social {
  margin: 60px auto;
  overflow: hidden;
  text-align: center;
}

@media screen and (max-width: 768px) {
  #social {
    margin: 26px auto;
  }
}

#social ul {
  margin: 0px auto;
  list-style-type: none;
  padding: 0px;
}

#social ul.social,
#social ul.contact {
  display: inline-block;
}

#social li {
  margin: 0 17px 0 0;
  float: left;
  color: rgba(255, 255, 255, 0.7);
}

@media only screen and (max-width: 495px) {
  #social li {
    margin: 0 0 10px 0;
    float: none;
    clear: both;
  }
}

#social li a {
  color: rgba(255, 255, 255, 0.7);
}

iframe {
  overflow: hidden;
}

#footerSealiFrame {
  border: medium none;
  height: 175px;
  margin: 0 auto;
  width: 100%;
  display: block;
  overflow: hidden;
}

@media only screen and (max-width: 600px) {
  #footerSealiFrame {
    height: 285px;
  }
  #footerSeals>img,
  #footerSeals>embed,
  #footerSeals>object,
  #footerSeals>a {
    display: inline-block !important;
    margin: 0 6px 10px !important;
    vertical-align: middle !important;
  }
}

<footer>
  <div class="content">
    <div id="helpfullinks">
      <div>
        <p class="category">About</p>
        <ul>
          <li><a href="#">Our Mission</a></li>
          <li><a href="#">AdaptaPASS</a></li>
          <li><a href="#">Affiliates</a></li>
          <li><a href="#">Campus Representatives</a></li>
          <li><a href="#">Privacy Policy</a></li>
        </ul>
      </div>
      <div>
        <p class="category">Products</p>
        <ul>
          <li><a href="#">All-Access Course Bundles</a></li>
          <li><a href="#">CRAM Courses</a></li>
          <li><a href="#">Audio Lectures</a></li>
          <li><a href="#">TestBank Software</a></li>
          <li><a href="#">Digital Flashcards</a></li>
          <li><a href="#">Exam Stress Relief</a></li>
        </ul>
      </div>
      <div>
        <p class="category">Resources</p>
        <ul>
          <li><a href="#">Free Assessment</a></li>
          <li><a href="#">Start a Free Trial</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Requirements by State</a></li>
        </ul>
      </div>
      <div class="last">
        <p class="category">Support</p>
        <ul>
          <li><a href="#">(800) 824 2811</a></li>
          <li><a href="#">Use the chat feature below to reach one of our support specialists</a></li>
          <li><a href="#">Contact Us</a></li>
          <li><a href="#">Login to AdaptaPASS</a></li>
          <li><a href="#">Login to myYaeger Student Portal</a></li>
        </ul>
      </div>
      <div class="clear"></div>
    </div>
    <div class="clear"></div>
    <div id="poweredby">
      <ul>
        <li class="last"><img src="include/images/footerlogo.png"></li>
      </ul>
    </div>
    <div class="clear"></div>
    <div id="social">
      <ul class="social">
        <li><a target="_blank" href="#">Facebook</a></li>
        <li><a target="_blank" href="#">Twitter</a></li>
        <li><a target="_blank" href="#">YouTube</a></li>
        <li class="last"><a target="_blank" href="#">LinkedIn</a></li>
      </ul>
      <div class="clear"></div>
      <ul class="contact">
        <li class="last">&copy;2017 Yaegar CPA Review, All Rights Reserved</li>
      </ul>
    </div>
  </div>
</footer>

Answer 1

本质上，您需要做的是杀死 floats 并在适当的视口宽度处重置 width，例如：

#helpfullinks div { /* for the sake of demonstration */
  float: none;
  width: 100%;
}

footer .clear {
  clear: both;
  float: none;
}

footer {
  background: #222;
  overflow: hidden;
  border-top: solid 1px #000;
  padding: 58px 0 0;
  font-family: arial, helvetica, sans-serif;
  line-height: 1.5em;
}

footer p,
footer ul,
footer a,
footer .btn {
  font-family: arial, helvetica, sans-serif;
  line-height: 1.5em;
  text-transform: none;
}

footer li {
  font-size: .875em;
  line-height: 1.5em;
}

footer .btn {
  background: #4497c4;
  background-image: -webkit-linear-gradient(top, #4497c4, #2d6a8e);
  background-image: -moz-linear-gradient(top, #4497c4, #2d6a8e);
  background-image: -ms-linear-gradient(top, #4497c4, #2d6a8e);
  background-image: -o-linear-gradient(top, #4497c4, #2d6a8e);
  background-image: linear-gradient(to bottom, #4497c4, #2d6a8e);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 2px #ffffff;
  -moz-box-shadow: 0px 1px 2px #ffffff;
  box-shadow: 0px 1px 2px #ffffff;
  color: #ffffff!important;
  font-size: 15px;
  padding: 5px 15px 6px 15px;
  border: solid #25658a 1px;
  text-decoration: none;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

footer .content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

@media screen and (max-width: 768px) {
  footer .content {
    padding: 0 10px;
  }
}

footer .last {
  margin-right: 0px !important;
}

@media only screen and (max-width: 485px) {
  footer .last {
    clear: both;
  }
}

#emailsignup {
  float: left;
  width: 330px;
}

#emailsignup .footer-logo {
  display: block;
  width: 155px;
  height: 41px;
  background: url("https://www.proxibid.com/images/footer-logo-proxibid.png") top left no-repeat;
  text-indent: -9999px;
  margin-bottom: 30px;
}

#emailsignup a,
#helpfullinks a,
#social a,
#poweredby a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

#emailsignup p {
  font-size: 13px;
  color: #FFF;
  margin: 0px 0px 16px;
}

#helpfullinks {
  float: right;
}

@media only screen and (max-width: 825px) {
  #helpfullinks {
    float: none;
    clear: both;
  }
}

#helpfullinks div {
  float: left;
  margin-right: 45px;
  width: 20%;
}

#helpfullinks div a {
  display: inline;
  margin-top: -6px;
  margin-bottom: 8px;
}

#helpfullinks p.category {
  color: #FFF;
  font-size: 21px;
  margin: 0 0 14px;
}

#helpfullinks p.category a {
  color: #FFF;
}

#helpfullinks ul {
  list-style-type: none;
  padding: 0px;
  margin: 14px 0 0 0;
}

#helpfullinks li {
  padding: 0px;
  margin: 0 0 6px;
  font-size: 15px;
}

#poweredby {
  max-width: 100%;
  margin: 115px auto 0;
  overflow: hidden;
  text-align: center;
}

@media screen and (max-width: 768px) {
  #poweredby {
    margin: 26px auto 0;
  }
}

#poweredby p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 10px;
  text-align: center;
}

#poweredby ul {
  display: inline-block;
  margin: 0px auto;
  list-style-type: none;
  padding: 0px;
}

#poweredby li {
  margin: 0 40px 0 0;
  float: left;
}

@media only screen and (max-width: 495px) {
  #poweredby li {
    margin: 0 0 10px 0;
    float: none;
    clear: both;
  }
}

#poweredby .footer-divvy {
  display: block;
  width: 77px;
  height: 24px;
  background: url("https://www.proxibid.com/images/footer-logo-divvy.png") top left no-repeat;
  text-indent: -9999px;
}

#poweredby .footer-finest {
  display: block;
  width: 77px;
  height: 24px;
  background: url("https://www.proxibid.com/images/footer-logo-thefinest.png") top left no-repeat;
  text-indent: -9999px;
}

#poweredby .footer-apn {
  display: block;
  width: 77px;
  height: 24px;
  background: url("https://www.proxibid.com/images/footer-logo-apn.png") top left no-repeat;
  text-indent: -9999px;
}

#social {
  margin: 60px auto;
  overflow: hidden;
  text-align: center;
}

@media screen and (max-width: 768px) {
  #social {
    margin: 26px auto;
  }
}

#social ul {
  margin: 0px auto;
  list-style-type: none;
  padding: 0px;
}

#social ul.social,
#social ul.contact {
  display: inline-block;
}

#social li {
  margin: 0 17px 0 0;
  float: left;
  color: rgba(255, 255, 255, 0.7);
}

@media only screen and (max-width: 495px) {
  #social li {
    margin: 0 0 10px 0;
    float: none;
    clear: both;
  }
}

#social li a {
  color: rgba(255, 255, 255, 0.7);
}

iframe {
  overflow: hidden;
}

#footerSealiFrame {
  border: medium none;
  height: 175px;
  margin: 0 auto;
  width: 100%;
  display: block;
  overflow: hidden;
}

@media only screen and (max-width: 600px) {
  #footerSealiFrame {
    height: 285px;
  }
  #footerSeals>img,
  #footerSeals>embed,
  #footerSeals>object,
  #footerSeals>a {
    display: inline-block !important;
    margin: 0 6px 10px !important;
    vertical-align: middle !important;
  }
}


/* Additional */

@media (max-width: 600px) {
  #helpfullinks div {
    float: none;
    width: 100%;
    border-bottom: 1px solid #5a5a5a;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
}

<footer>
  <div class="content">
    <div id="helpfullinks">
      <div>
        <p class="category">About</p>
        <ul>
          <li><a href="#">Our Mission</a></li>
          <li><a href="#">AdaptaPASS</a></li>
          <li><a href="#">Affiliates</a></li>
          <li><a href="#">Campus Representatives</a></li>
          <li><a href="#">Privacy Policy</a></li>
        </ul>
      </div>
      <div>
        <p class="category">Products</p>
        <ul>
          <li><a href="#">All-Access Course Bundles</a></li>
          <li><a href="#">CRAM Courses</a></li>
          <li><a href="#">Audio Lectures</a></li>
          <li><a href="#">TestBank Software</a></li>
          <li><a href="#">Digital Flashcards</a></li>
          <li><a href="#">Exam Stress Relief</a></li>
        </ul>
      </div>
      <div>
        <p class="category">Resources</p>
        <ul>
          <li><a href="#">Free Assessment</a></li>
          <li><a href="#">Start a Free Trial</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Requirements by State</a></li>
        </ul>
      </div>
      <div class="last">
        <p class="category">Support</p>
        <ul>
          <li><a href="#">(800) 824 2811</a></li>
          <li><a href="#">Use the chat feature below to reach one of our support specialists</a></li>
          <li><a href="#">Contact Us</a></li>
          <li><a href="#">Login to AdaptaPASS</a></li>
          <li><a href="#">Login to myYaeger Student Portal</a></li>
        </ul>
      </div>
      <div class="clear"></div>
    </div>
    <div class="clear"></div>
    <div id="poweredby">
      <ul>
        <li class="last"><img src="include/images/footerlogo.png"></li>
      </ul>
    </div>
    <div class="clear"></div>
    <div id="social">
      <ul class="social">
        <li><a target="_blank" href="#">Facebook</a></li>
        <li><a target="_blank" href="#">Twitter</a></li>
        <li><a target="_blank" href="#">YouTube</a></li>
        <li class="last"><a target="_blank" href="#">LinkedIn</a></li>
      </ul>
      <div class="clear"></div>
      <ul class="contact">
        <li class="last">&copy;2017 Yaegar CPA Review, All Rights Reserved</li>
      </ul>
    </div>
  </div>
</footer>

奖金

因为星期五，心情特别大方，这里有一个flex-box方法：

#helpfullinks {
  display: flex;
  flex-direction: column;
  flex-flow: wrap;
}

footer .clear {
  clear: both;
  float: none;
}

footer {
  background: #222;
  overflow: hidden;
  border-top: solid 1px #000;
  padding: 58px 0 0;
  font-family: arial, helvetica, sans-serif;
  line-height: 1.5em;
}

footer p,
footer ul,
footer a,
footer .btn {
  font-family: arial, helvetica, sans-serif;
  line-height: 1.5em;
  text-transform: none;
}

footer li {
  font-size: .875em;
  line-height: 1.5em;
}

footer .btn {
  background: #4497c4;
  background-image: -webkit-linear-gradient(top, #4497c4, #2d6a8e);
  background-image: -moz-linear-gradient(top, #4497c4, #2d6a8e);
  background-image: -ms-linear-gradient(top, #4497c4, #2d6a8e);
  background-image: -o-linear-gradient(top, #4497c4, #2d6a8e);
  background-image: linear-gradient(to bottom, #4497c4, #2d6a8e);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 2px #ffffff;
  -moz-box-shadow: 0px 1px 2px #ffffff;
  box-shadow: 0px 1px 2px #ffffff;
  color: #ffffff!important;
  font-size: 15px;
  padding: 5px 15px 6px 15px;
  border: solid #25658a 1px;
  text-decoration: none;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

footer .content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

@media screen and (max-width: 768px) {
  footer .content {
    padding: 0 10px;
  }
}

footer .last {
  margin-right: 0px !important;
}

@media only screen and (max-width: 485px) {
  footer .last {
    clear: both;
  }
}

#emailsignup {
  float: left;
  width: 330px;
}

#emailsignup .footer-logo {
  display: block;
  width: 155px;
  height: 41px;
  background: url("https://www.proxibid.com/images/footer-logo-proxibid.png") top left no-repeat;
  text-indent: -9999px;
  margin-bottom: 30px;
}

#emailsignup a,
#helpfullinks a,
#social a,
#poweredby a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

#emailsignup p {
  font-size: 13px;
  color: #FFF;
  margin: 0px 0px 16px;
}

#helpfullinks {
  float: right;
}

@media only screen and (max-width: 825px) {
  #helpfullinks {
    float: none;
    clear: both;
  }
}

#helpfullinks div {
  float: left;
  margin-right: 45px;
  width: 20%;
}

#helpfullinks div a {
  display: inline;
  margin-top: -6px;
  margin-bottom: 8px;
}

#helpfullinks p.category {
  color: #FFF;
  font-size: 21px;
  margin: 0 0 14px;
}

#helpfullinks p.category a {
  color: #FFF;
}

#helpfullinks ul {
  list-style-type: none;
  padding: 0px;
  margin: 14px 0 0 0;
}

#helpfullinks li {
  padding: 0px;
  margin: 0 0 6px;
  font-size: 15px;
}

#poweredby {
  max-width: 100%;
  margin: 115px auto 0;
  overflow: hidden;
  text-align: center;
}

@media screen and (max-width: 768px) {
  #poweredby {
    margin: 26px auto 0;
  }
}

#poweredby p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 10px;
  text-align: center;
}

#poweredby ul {
  display: inline-block;
  margin: 0px auto;
  list-style-type: none;
  padding: 0px;
}

#poweredby li {
  margin: 0 40px 0 0;
  float: left;
}

@media only screen and (max-width: 495px) {
  #poweredby li {
    margin: 0 0 10px 0;
    float: none;
    clear: both;
  }
}

#poweredby .footer-divvy {
  display: block;
  width: 77px;
  height: 24px;
  background: url("https://www.proxibid.com/images/footer-logo-divvy.png") top left no-repeat;
  text-indent: -9999px;
}

#poweredby .footer-finest {
  display: block;
  width: 77px;
  height: 24px;
  background: url("https://www.proxibid.com/images/footer-logo-thefinest.png") top left no-repeat;
  text-indent: -9999px;
}

#poweredby .footer-apn {
  display: block;
  width: 77px;
  height: 24px;
  background: url("https://www.proxibid.com/images/footer-logo-apn.png") top left no-repeat;
  text-indent: -9999px;
}

#social {
  margin: 60px auto;
  overflow: hidden;
  text-align: center;
}

@media screen and (max-width: 768px) {
  #social {
    margin: 26px auto;
  }
}

#social ul {
  margin: 0px auto;
  list-style-type: none;
  padding: 0px;
}

#social ul.social,
#social ul.contact {
  display: inline-block;
}

#social li {
  margin: 0 17px 0 0;
  float: left;
  color: rgba(255, 255, 255, 0.7);
}

@media only screen and (max-width: 495px) {
  #social li {
    margin: 0 0 10px 0;
    float: none;
    clear: both;
  }
}

#social li a {
  color: rgba(255, 255, 255, 0.7);
}

iframe {
  overflow: hidden;
}

#footerSealiFrame {
  border: medium none;
  height: 175px;
  margin: 0 auto;
  width: 100%;
  display: block;
  overflow: hidden;
}

@media only screen and (max-width: 600px) {
  #footerSealiFrame {
    height: 285px;
  }
  #footerSeals>img,
  #footerSeals>embed,
  #footerSeals>object,
  #footerSeals>a {
    display: inline-block !important;
    margin: 0 6px 10px !important;
    vertical-align: middle !important;
  }
}


/* Bonus (let's get Flexy) */

@media (max-width: 600px) {
  #helpfullinks {
    display: flex;
    flex-direction: column;
    flex-flow: wrap;
  }
  #helpfullinks div {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    border-bottom: 1px solid #5a5a5a;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
}

<footer>
  <div class="content">
    <div id="helpfullinks">
      <div>
        <p class="category">About</p>
        <ul>
          <li><a href="#">Our Mission</a></li>
          <li><a href="#">AdaptaPASS</a></li>
          <li><a href="#">Affiliates</a></li>
          <li><a href="#">Campus Representatives</a></li>
          <li><a href="#">Privacy Policy</a></li>
        </ul>
      </div>
      <div>
        <p class="category">Products</p>
        <ul>
          <li><a href="#">All-Access Course Bundles</a></li>
          <li><a href="#">CRAM Courses</a></li>
          <li><a href="#">Audio Lectures</a></li>
          <li><a href="#">TestBank Software</a></li>
          <li><a href="#">Digital Flashcards</a></li>
          <li><a href="#">Exam Stress Relief</a></li>
        </ul>
      </div>
      <div>
        <p class="category">Resources</p>
        <ul>
          <li><a href="#">Free Assessment</a></li>
          <li><a href="#">Start a Free Trial</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Requirements by State</a></li>
        </ul>
      </div>
      <div class="last">
        <p class="category">Support</p>
        <ul>
          <li><a href="#">(800) 824 2811</a></li>
          <li><a href="#">Use the chat feature below to reach one of our support specialists</a></li>
          <li><a href="#">Contact Us</a></li>
          <li><a href="#">Login to AdaptaPASS</a></li>
          <li><a href="#">Login to myYaeger Student Portal</a></li>
        </ul>
      </div>
      <div class="clear"></div>
    </div>
    <div class="clear"></div>
    <div id="poweredby">
      <ul>
        <li class="last"><img src="include/images/footerlogo.png"></li>
      </ul>
    </div>
    <div class="clear"></div>
    <div id="social">
      <ul class="social">
        <li><a target="_blank" href="#">Facebook</a></li>
        <li><a target="_blank" href="#">Twitter</a></li>
        <li><a target="_blank" href="#">YouTube</a></li>
        <li class="last"><a target="_blank" href="#">LinkedIn</a></li>
      </ul>
      <div class="clear"></div>
      <ul class="contact">
        <li class="last">&copy;2017 Yaegar CPA Review, All Rights Reserved</li>
      </ul>
    </div>
  </div>
</footer>

Answer 2

您在 margin-right 中使用了像素而不是百分比。因此，如果我们将剩余的 space 转换为百分比，我们将得到每个 div 大约 6.66%。这样我们就可以实现需要的布局了。

.clear {
  clear: both;
  float: none;
}

footer {
  background: #222;
  overflow: hidden;
  border-top: solid 1px #000;
  padding: 58px 0 0;
  font-family: arial, helvetica, sans-serif;
  line-height: 1.5em;
}

footer p,
footer ul,
footer a,
footer .btn {
  font-family: arial, helvetica, sans-serif;
  line-height: 1.5em;
  text-transform: none;
}

footer li {
  font-size: .875em;
  line-height: 1.5em;
}

footer .btn {
  background: #4497c4;
  background-image: -webkit-linear-gradient(top, #4497c4, #2d6a8e);
  background-image: -moz-linear-gradient(top, #4497c4, #2d6a8e);
  background-image: -ms-linear-gradient(top, #4497c4, #2d6a8e);
  background-image: -o-linear-gradient(top, #4497c4, #2d6a8e);
  background-image: linear-gradient(to bottom, #4497c4, #2d6a8e);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 2px #ffffff;
  -moz-box-shadow: 0px 1px 2px #ffffff;
  box-shadow: 0px 1px 2px #ffffff;
  color: #ffffff!important;
  font-size: 15px;
  padding: 5px 15px 6px 15px;
  border: solid #25658a 1px;
  text-decoration: none;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

footer .content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

@media screen and (max-width: 768px) {
  footer .content {
    padding: 0 10px;
  }
}

footer .last {
  margin-right: 0px !important;
}

@media only screen and (max-width: 485px) {
  footer .last {}
}

#emailsignup {
  float: left;
  width: 330px;
}

#emailsignup .footer-logo {
  display: block;
  width: 155px;
  height: 41px;
  background: url("https://www.proxibid.com/images/footer-logo-proxibid.png") top left no-repeat;
  text-indent: -9999px;
  margin-bottom: 30px;
}

#emailsignup a,
#helpfullinks a,
#social a,
#poweredby a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

#emailsignup p {
  font-size: 13px;
  color: #FFF;
  margin: 0px 0px 16px;
}

#helpfullinks {
  float: right;
}

@media only screen and (max-width: 825px) {
  #helpfullinks {
    float: none;
    clear: both;
  }
}

#helpfullinks div {
  float: left;
  margin-right: 6.66%;
  width: 20%;
}

#helpfullinks div a {
  display: inline;
  margin-top: -6px;
  margin-bottom: 8px;
}

#helpfullinks p.category {
  color: #FFF;
  font-size: 21px;
  margin: 0 0 14px;
}

#helpfullinks p.category a {
  color: #FFF;
}

#helpfullinks ul {
  list-style-type: none;
  padding: 0px;
  margin: 14px 0 0 0;
}

#helpfullinks li {
  padding: 0px;
  margin: 0 0 6px;
  font-size: 15px;
}

#poweredby {
  max-width: 100%;
  margin: 115px auto 0;
  overflow: hidden;
  text-align: center;
}

@media screen and (max-width: 768px) {
  #poweredby {
    margin: 26px auto 0;
  }
}

#poweredby p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 10px;
  text-align: center;
}

#poweredby ul {
  display: inline-block;
  margin: 0px auto;
  list-style-type: none;
  padding: 0px;
}

#poweredby li {
  margin: 0 40px 0 0;
  float: left;
}

@media only screen and (max-width: 495px) {
  #poweredby li {
    margin: 0 0 10px 0;
    float: none;
    clear: both;
  }
}

#poweredby .footer-divvy {
  display: block;
  width: 77px;
  height: 24px;
  background: url("https://www.proxibid.com/images/footer-logo-divvy.png") top left no-repeat;
  text-indent: -9999px;
}

#poweredby .footer-finest {
  display: block;
  width: 77px;
  height: 24px;
  background: url("https://www.proxibid.com/images/footer-logo-thefinest.png") top left no-repeat;
  text-indent: -9999px;
}

#poweredby .footer-apn {
  display: block;
  width: 77px;
  height: 24px;
  background: url("https://www.proxibid.com/images/footer-logo-apn.png") top left no-repeat;
  text-indent: -9999px;
}

#social {
  margin: 60px auto;
  overflow: hidden;
  text-align: center;
}

@media screen and (max-width: 768px) {
  #social {
    margin: 26px auto;
  }
}

#social ul {
  margin: 0px auto;
  list-style-type: none;
  padding: 0px;
}

#social ul.social,
#social ul.contact {
  display: inline-block;
}

#social li {
  margin: 0 17px 0 0;
  float: left;
  color: rgba(255, 255, 255, 0.7);
}

@media only screen and (max-width: 495px) {
  #social li {
    margin: 0 0 10px 0;
    float: none;
    clear: both;
  }
}

#social li a {
  color: rgba(255, 255, 255, 0.7);
}

iframe {
  overflow: hidden;
}

#footerSealiFrame {
  border: medium none;
  height: 175px;
  margin: 0 auto;
  width: 100%;
  display: block;
  overflow: hidden;
}

@media only screen and (max-width: 600px) {
  #footerSealiFrame {
    height: 285px;
  }
  #footerSeals>img,
  #footerSeals>embed,
  #footerSeals>object,
  #footerSeals>a {
    display: inline-block !important;
    margin: 0 6px 10px !important;
    vertical-align: middle !important;
  }
}

<footer>
  <div class="content">
    <div id="helpfullinks">
      <div>
        <p class="category">About</p>
        <ul>
          <li><a href="#">Our Mission</a></li>
          <li><a href="#">AdaptaPASS</a></li>
          <li><a href="#">Affiliates</a></li>
          <li><a href="#">Campus Representatives</a></li>
          <li><a href="#">Privacy Policy</a></li>
        </ul>
      </div>
      <div>
        <p class="category">Products</p>
        <ul>
          <li><a href="#">All-Access Course Bundles</a></li>
          <li><a href="#">CRAM Courses</a></li>
          <li><a href="#">Audio Lectures</a></li>
          <li><a href="#">TestBank Software</a></li>
          <li><a href="#">Digital Flashcards</a></li>
          <li><a href="#">Exam Stress Relief</a></li>
        </ul>
      </div>
      <div>
        <p class="category">Resources</p>
        <ul>
          <li><a href="#">Free Assessment</a></li>
          <li><a href="#">Start a Free Trial</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Requirements by State</a></li>
        </ul>
      </div>
      <div class="last">
        <p class="category">Support</p>
        <ul>
          <li><a href="#">(800) 824 2811</a></li>
          <li><a href="#">Use the chat feature below to reach one of our support specialists</a></li>
          <li><a href="#">Contact Us</a></li>
          <li><a href="#">Login to AdaptaPASS</a></li>
          <li><a href="#">Login to myYaeger Student Portal</a></li>
        </ul>
      </div>
      <div class="clear"></div>
    </div>
    <div class="clear"></div>
    <div id="poweredby">
      <ul>
        <li class="last"><img src="include/images/footerlogo.png"></li>
      </ul>
    </div>
    <div class="clear"></div>
    <div id="social">
      <ul class="social">
        <li><a target="_blank" href="#">Facebook</a></li>
        <li><a target="_blank" href="#">Twitter</a></li>
        <li><a target="_blank" href="#">YouTube</a></li>
        <li class="last"><a target="_blank" href="#">LinkedIn</a></li>
      </ul>
      <div class="clear"></div>
      <ul class="contact">
        <li class="last">&copy;2017 Yaegar CPA Review, All Rights Reserved</li>
      </ul>
    </div>
  </div>
</footer>

4 列页脚不为移动设备堆叠

4 Column Footer Not Stacking for Mobile

html

css

footer