我正在尝试定位页脚的内容。我的页脚里面会有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下方。谁能帮助我,请问如何将它们放在一起?
答案 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)
如果您希望右脚向上移动到中心,可以向float:left
添加#footerRight
,或者如果您希望将其轻推到{右侧边缘float:right
,则可以#footerContainer
添加{{1}} {1}}。
我放了一个红色边框,这样你就可以看到你的div了。我还把你的无序列表包裹在div中。
希望这有帮助