Footer appears next to section instead of below

2019-06-01 08:05发布

站内问答 / HTML/CSS
1225 2 6

This is how the website should look like: https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/index.html

However the bottom sections appear next to each other rather than below. Here is the code: (HTML) http://pastie.org/10325555

(CSS) http://pastie.org/10325550

2条回答
Emotional °昔
2楼-- · 2019-06-01 09:01

Just a few tweaks! Here's my fiddle

.container {
  max-width: 928px;
  position: relative;
  display: block;
  !important
}
h1,
h2,
p,
a {
  font-family: 'Helvetica Neue Thin', 'HelveticaNeue-Thin', 'helvetica neue', helvetica, arial, 'lucida grande', sans-serif;
}
h1 {
  font-size: 64px;
  font-weight: 100;
  margin-bottom: 20px;
}
a {
  font-size: 18px;
  font-weight: 200;
}
.btn:link {
  background-color: rgba(238, 68, 95, 0.9);
  color: white;
  text-decoration: none;
}
a:active {
  background-color: rgba(238, 68, 95, 0.9);
  color: white;
  text-decoration: none;
}
a:hover {
  background-color: rgba(238, 68, 95, 0.9);
  color: white;
  text-decoration: none;
}
a:visited {
  background-color: rgba(238, 68, 95, 0.9);
  color: white;
  text-decoration: none;
}
#main {
  background: url("https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/intro.jpg") no-repeat center center;
  background-size: cover;
  height: 550px;
}
.main p {
  font-size: 26px;
  font-weight: 200;
  margin-bottom: 40px;
}
section .row {
  padding-top: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid #dbdbdb;
}
.section h2 {
  font-size: 50px;
}
.store {
  text-align: center;
  border-bottom: 0px;
  padding-bottom: 0px
}
footer {
  position: relative;
  display: block!important;
  border-top: 1px solid #dbdbdb;
  background-color: #f3f3f3;
  padding: 20px 0px 80px;
}
.footer ul {
  list-style-type: none;
  padding-left: 0;
}
.footer li {
  color: #999;
  font-weight: 600;
}
@media (max-width: 500px) {
  .col-md-6 img {
    padding: 50px;
    width: 100%;
  }
}
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />

<body>
  <div id="main">
    <div class="container">
      <h2>Heading</h2>

      <p>Paragraph Text</p> <a class="btn" href="#">Download Shutterbug</a>

    </div>
  </div>
  <section>
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/share.png">
        </div>
        <div class="col-md-6">
          <h2>Heading</h2>

          <p>Paragraph</p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/explore.png">
        </div>
        <div class="col-md-6">
          <h2>Heading</h2>

          <p>Text Text Text Text Text</p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/save.png">
        </div>
        <div class="col-md-6">
          <h2>Heading<h3>
            <p>Text Text Text</p>
            <div>
           </div>     
                         
    
    <div class="store">
      <div class="container">
      <h2>Available for iPhone, iPad, and Android.</h2>

          <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="185px" />
          <img alt="Get it on Google Play" src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="159px" />
        </div>
      </div>

  </section>
  <footer>
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <h2>Company</h2>

          <ul>
            <li>Careers</li>
            <li>Terms</li>
            <li>Help</li>
          </ul>
        </div>
        <div class="col-md-4">
          <h2>Products</h2>

          <ul>
            <li>Shutterbugg</li>
            <li>Speakerboxx</li>
          </ul>
        </div>
        <div class="col-md-4">
          <h2>News</h2>

          <ul>
            <li>Blog</li>
            <li>Twitter</li>
            <li>Facebook</li>
            <li>Myspace</li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</body>

查看更多
0人赞 添加讨论(0) 举报
对你真心纯属浪费
3楼-- · 2019-06-01 09:05

You need to clean the padding-bottom of your class footer.

.footer {
    border-top: 1px solid #dbdbdb;
    background-color: #f3f3f3;
    padding: 20px 0px 80px;
    padding-bottom: 0px;
}

I hope of it helps you.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)