Question

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

Design of the footer I'm shooting for.

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

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

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

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

<强> FIDDLE

Answer 2

在这里尝试这些。这应该可以解决......

   <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 3

如果您对浮动div有任何问题，您可以采取不同的路线。添加pos：绝对; 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;
}

编辑：小提琴无效。

构建一个居中的列页脚

4 个答案: