构建居中的列页脚

Question

我正在开发一个显示四列的柱状页脚。其中一列，只是一个图像。其余的都是有用的超链接。

这是我现在的工作http://jsfiddle.net/Lqh5a/

HTML

<div id="wrapper">
<div id="footer">
<div class="footerFloat">
<h4>Header 1</h4>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li></div>
<div class="footerFloat">
<h4>Header 2</h4>
<ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 3</h4>
<ul>
  <li><img src="http://cdn.shopify.com/s/files/1/0593/8633/t/2/assets/footer-logo.png?1101"></li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 4</h4>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li></div>
</div>
</div>

CSS

 #footer {
        width: 100%;
        margin: auto;
        padding-bottom:200px;
    }
    .footerFloat {
    width: 100%;
    }
@media all and (min-width: 950px) {
    #footer {
        width: 980px;
        margin: auto;
    } 
    .footerFloat {
    width: 25%;
    float: left;
    }
}

#wrapper {
    background-color: blue;
    width: 100%;
    overflow:hidden;
} 

以前从未这样做过，所以我不确定我是否正确地这样做了。我怎样才能让这个页脚看起来正确？

Answer 1

来试试这些。这应该可以解决...

   <div id="wrapper">
      <div id="footer">
        <div class="footerFloat">
        <h4>Header 1</h4>
          <ul>
            <li>Line 1</li>
            <li>Line 2</li>
            <li>Line 3</li>
            <li>Line 4</li>
          </ul>
        </div>
        <div class="footerFloat">
          <h4>Header 2</h4>
          <ul>
            <li>Line 1</li>
            <li>Line 2</li>
            <li>Line 3</li>
            <li>Line 4</li>
          </ul>
        </div>
        <div class="footerFloat">
          <h4>Header 3</h4>
          <ul>
            <li><img src="http://cdn.shopify.com/s/files/1/0593/8633/t/2/assets/footer-logo.png?1101"></li>
          </ul>
        </div>
        <div class="footerFloat">
          <h4>Header 4</h4>
           <ul>
            <li>Line 1</li>
            <li>Line 2</li>
            <li>Line 3</li>
            <li>Line 4</li>
          </ul>
        </div>
        <div class="footerFloat">
          <h4>Header 4</h4>
           <ul>
            <li>Line 1</li>
            <li>Line 2</li>
            <li>Line 3</li>
            <li>Line 4</li>
          </ul>
        </div>
      </div>
    </div>

将它与 css 结合起来：

#footer {
        width: 100%;
        margin: auto;
        padding-bottom:200px;
    }
ul{
    list-style: none;
    display: inline-block;
    padding: 0;
}
@media all and (min-width: 950px) {
    #footer {
        width: 950px;
        margin: auto;
    } 
    .footerFloat {
    width: 25%;
    float: left;
        text-align: center;
    }
}

#wrapper {
    background-color: blue;
    width: 100%;
    overflow:hidden;
} 

Answer 2

它并不完美，但它会让你朝着你想去的方向前进。我刚刚在你的小提琴中添加了一些 CSS。

.footerFloat {
    width: 25%;
    float: left;    
 }

.footerFloat ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

FIDDLE

Answer 3

如果您对浮动 div 有任何问题，您可以采取不同的方法。 添加 pos:absolute; bottom:0px 到容器 div 然后添加 pos:relative;上：0 左 0 如果您将所有内容都浮动到页脚上方，这可能是个问题。

Answer 4

您缺少一些 ul 标签。但这应该会让你接近你想要的。

JSFiddle

HTML：

<div id="wrapper">
<div id="footer">
<div class="footerFloat">
<h4>COMPANY</h4>
    <ul>
  <li>CONTACT</li>
  <li>CUSTOMER CARE</li>
  <li>ABOUT US</li>
  </ul>
  </div>
<div class="footerFloat">
<h4>ORDERING</h4>
<ul>
  <li>SHIPPING</li>
  <li>RETURNS</li>
  <li>SIZE CHART</li>
</ul>
</div>
<div class="footerFloat logo">
<img src="http://cdn.shopify.com/s/files/1/0593/8633/t/2/assets/footer-logo.png?1101">
</div>
<div class="footerFloat">
<h4>STORE</h4>
    <ul>
  <li>SHOP</li>
  <li>RETAILERS</li>
  <li>GIFT CARDS</li>
  </ul>
  </div>
<div class="footerFloat">
<h4>SOCIAL</h4>
    <ul>
  <li>BLOG</li>
  <li>INSTAGRAM</li>
  <li>PINTEREST</li>
  </ul>
  </div>
</div>
</div>

CSS：

 ul {
     list-style: none;
    list-style-position: inside;
    padding: 0;
 }
ul li {
    text-align: center;
}

#footer {
        width: 100%;
        margin: auto;
        padding-bottom:200px;
    }
    .footerFloat {
    width: 19%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 0.750em;
    }
@media all and (min-width: 950px) {
    #footer {
        width: 980px;
        margin: auto;
    } 
    .footerFloat {
    width: 25%;
    float: left;
    }
}

.logo {
    padding-top: 4em;
}

#wrapper {
    background-color: #fff;
    width: 100%;
    overflow:hidden;
} 

编辑： Fiddle 不工作。