html - 页脚元素未正确对齐

Question

我写了一个页脚，如下图:

#footer {
  height: 350px;
  background: #003663;
}
#footerItems {
  width: 100%;
}
#footerItems div {
  display: inline-block;
  color: #FFF;
  padding-top: 2%;
  font-weight: bold;
  font-size: 16px;
}
#contfix {
  padding-right: 0;
  padding-left: 0;
}
.accountPos {
  padding-left: 3%;
}
.accountPos #lst {
  display: block;
}
#footerItems div ul {
  padding-left: 0;
}
#footerItems div ul li {
  list-style-type: none;
  font-weight: 400;
  font-size: 13px;
  font-style: italic;
  color: rgb(146, 145, 200);
}
/*#videoptions {
    height: 74px;
    width: 23px;
    background-color: #4c5053;
}

#footerItems div video {
    min-width: 35px;
    min-height: 30px;
}

#footerItems > #media {
    display: inline-block;
}*/

.socialinks {
  min-width: 450px;
  width: 39%;
  float: left;
}
.slinks {
  padding-left: 14%;
}
#hidden {
  background: #0c99c8 none repeat scroll 0 0;
  border-radius: 3px;
  height: 6%;
  margin-top: 0;
  min-height: 40px;
  padding: 0 0 0 3%;
  width: 50%;
  min-width: 400px;
  position: absolute;
  /*z-index: 1;*/
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="footer">
  <div class="col-md-12 imgcontainer">
    <img src="images/Bistip-in-media.png" class="center-block">
  </div>
  <div class="container clearfix visible-desktop" id="contfix">
    <div id="footerItems">
      <div style="width: 12%;">About Us
        <div>
          <ul>
            <li>About us</li>
            <li>Media reviews</li>
            <li>Bistip guide</li>
          </ul>
        </div>
      </div>
      <div class="accountPos" class="">Account Information
        <div id="lst">
          <ul>
            <li>How to login</li>
            <li>Create an account</li>
            <li>Logout</li>
            <li>Join us</li>
          </ul>
        </div>
      </div>
      <div class="accountPos" class="col-md-3" style="padding-left: 9%;">Market
        <div id="lst">
          <ul>
            <li>Shop</li>
            <li>Shipping</li>
            <li>My connection</li>
          </ul>
        </div>
      </div>
      <div class="accountPos" style="padding-left: 9%;">Bistip
        <div id="lst">
          <ul>
            <li>User agreement</li>
            <li>Disclaimer</li>
          </ul>
        </div>
      </div>
      <div class="accountPos" style="padding-top: 0%;" id="media">Media
        <!-- <div id="lst">
                                        <ul>
                                            <li>About us</li>
                                            <li>Media reviews</li>
                                            <li>Bistip guide</li>
                                        </ul>
                                    </div> -->
        <!-- <div>
                            <video controls height="30" width="60">
                                <source src="movie.mp4" type="video/mp4">
                                <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag.
                            </video>
                        </div> --></div>
      <div class="socialinks">
        <div>
          <img src="images/fb.png" alt="f" style="width: 29%;">Facebook</div>
        <div class="slinks">
          <img src="images/tw.png" alt="t">Twitter</div>
        <div class="slinks">
          <img src="images/go.png" alt="g">Google+</div>
      </div>
    </div>
  </div>
</div>

为获得最佳效果，请全屏查看。
页脚元素未按此屏幕截图所示组织和对齐:

那么如何使用正确的 CSS 来正确对齐页脚元素呢？

Answer 1

#footerItems div部分需要vertical-align: top;。

#footer {
  height: 350px;
  background: #003663;
}

#footerItems {
  width: 100%;
}

#footerItems div {
  display: inline-block;
  color: #FFF;
  padding-top: 2%;
  font-weight: bold;
  font-size: 16px;
  vertical-align: top;
}

#contfix {
  padding-right: 0;
  padding-left: 0;
}

.accountPos {
  padding-left: 3%;
}

.accountPos #lst {
  display: block;
}

#footerItems div ul {
  padding-left: 0;
}

#footerItems div ul li {
  list-style-type: none;
  font-weight: 400;
  font-size: 13px;
  font-style: italic;
  color: rgb(146, 145, 200);
}

.socialinks {
  min-width: 450px;
  width: 39%;
  float: left;
}

.slinks {
  padding-left: 14%;
}

#hidden {
  background: #0c99c8 none repeat scroll 0 0;
  border-radius: 3px;
  height: 6%;
  margin-top: 0;
  min-height: 40px;
  padding: 0 0 0 3%;
  width: 50%;
  min-width: 400px;
  position: absolute;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<div id="footer">
  <div class="col-md-12 imgcontainer">
    <img src="images/Bistip-in-media.png" class="center-block">
  </div>
  <div class="container clearfix visible-desktop" id="contfix">
    <div id="footerItems">
      <div style="width: 12%;">About Us
        <div>
          <ul>
            <li>About us</li>
            <li>Media reviews</li>
            <li>Bistip guide</li>
          </ul>
        </div>
      </div>
      <div class="accountPos" class="">Account Information
        <div id="lst">
          <ul>
            <li>How to login</li>
            <li>Create an account</li>
            <li>Logout</li>
            <li>Join us</li>
          </ul>
        </div>
      </div>
      <div class="accountPos" class="col-md-3" style="padding-left: 9%;">Market
        <div id="lst">
          <ul>
            <li>Shop</li>
            <li>Shipping</li>
            <li>My connection</li>
          </ul>
        </div>
      </div>
      <div class="accountPos" style="padding-left: 9%;">Bistip
        <div id="lst">
          <ul>
            <li>User agreement</li>
            <li>Disclaimer</li>
          </ul>
        </div>
      </div>
      <div class="accountPos" style="padding-top: 0%;" id="media">Media</div>
      <div class="socialinks">
        <div>
          <img src="images/fb.png" alt="f" style="width: 29%;">Facebook</div>
        <div class="slinks">
          <img src="images/tw.png" alt="t">Twitter</div>
        <div class="slinks">
          <img src="images/go.png" alt="g">Google+</div>
      </div>
    </div>
  </div>
</div>