Question

也许这是粘性页脚的问题，也许不是。不太确定。我希望我的页脚内的div可以使用float:left并排排列，但它们似乎堆叠在一起，我不知道为什么。

HTML：

 <div id="footer_container">
 <div id="footer_content">
 </div>
 <div id="footer_content">
 </div>..etc

CSS：

#footer_content {
font-size:18px;
    float:left;
padding:0 35px; 
color:#EEEEEE;
text-align:left;
    height:150px;
    width:150px;
}

加上所有常见的粘性页脚内容：

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#footer, .push {
height: 175px;
}
#footer_content a{
   color:#989393;
}
#footer_container{
   width:1100px;
   height:175px;
}

Answer 1

您无法复制元素id。元素id必须是唯一的，但您不止一次使用id=footer_content。浏览器倾向于忽略具有相同id的后续元素。

将它们全部改为班级。

 <div class="footer_content">
 </div>

 <div class="footer_content">
 </div>

和

.footer_content {
    font-size:18px;
    float:left;
    padding:0 35px; 
    color:#EEEEEE;
    text-align:left;
    height:150px;
    width:150px;
}

使用您的代码进行演示，只将一个ID更改为类...

http://jsfiddle.net/DRfuH/

看起来像他们现在并肩工作一样。

Answer 2

您需要将footer_content更改为类而不是id。

CSS：页脚内部粘滞的页脚和div。向左飘浮

2 个答案: