css - 定位页脚:div - ul - div div里面彼此相邻

时间:2013-11-23 17:08:51

标签: css html html-lists footer

我正在尝试定位页脚的内容。我的页脚里面会有3列。在左边,我想要“联系信息”,在中间的“菜单”,在右边的“新闻” 我的页脚的HTML结构是这样的:

 <div id="footercontainer">
   <div id="footer">

     <div id="footerLeft"></div>
     <ul id="footerCenter"> </ul>
     <div id="footerRight"> </div>

   </div>
 </div>

我的页脚CSS看起来像这样:

 #footer{
 width:1000px;
 margin:auto;
 }
 #footercontainer{
 width:100%;
 height:auto;
 background:url(../img/prechod_stranka-paticka1920x145.png) no-repeat top center;
 background-color:#4e4b47;
 overflow:hidden;
 }

 #footerLeft{
 padding-top:80px;
 padding-bottom:20px;
 width:40%;
 padding-left:30px;
 float:left;
 }

 #footerCenter{width:10%;float:left;padding-top:80px; display:block;}

 #footerRight{padding-top:80px; width:10%; display:block; }

现在footerLeft和footerCenter彼此相邻,但footerRight位于footerLeft下方。谁能帮助我,请问如何将它们放在一起?

3 个答案:

答案 0 :(得分:0)

这是3 col布局的基本标记

http://jsfiddle.net/cancerian73/8Lqr6/

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.common-div {
width:33.33%;
min-height:200px;
float:left;
}
.left {
background-color:#CCC
}
.right {
background-color:#930
}
.center {
background-color:#9C6
}

这就是你要找的东西吗?

答案 1 :(得分:0)

尝试将display:block更改为display:inline-block for footerRight div。

#footerRight{ padding-top:80px; width:10%; display:inline-block; }

答案 2 :(得分:0)

http://jsfiddle.net/3SDCT/

如果您希望右脚向上移动到中心,可以向float:left添加#footerRight,或者如果您希望将其轻推到{右侧边缘float:right,则可以#footerContainer添加{{1}} {1}}。

我放了一个红色边框,这样你就可以看到你的div了。我还把你的无序列表包裹在div中。

希望这有帮助