0

我将这个 CSS 用于我的网站页脚：

使它显示在页面中心的最佳方法是什么。我的网站是响应式的，因此当屏幕变小时它们会自动在彼此下方移动，但当屏幕变大时，它们更偏向左侧而不是右侧。

我在这里创建了一个小提琴，所以你也可以看到 html：http: //jsfiddle.net/x4A4B/

任何帮助将非常感激

#footer {
    width:100%;
    min-height:500px;
    position:relative;
    bottom:0;
    left:0;
    border-top:4px solid #F36F25;
    background-color:#666666;
    color:#EEEEEE;
}
#footer-inner {
    width:80%;
    margin:0 auto 0 auto;
    height:inherit;
}
#footer-top {
    width:100%;
    padding-top:10px;
    border-bottom:2px #EEEEEE solid;
    display:block;
}
#footer-left {
    width: 290px;
    display:inline-block;
    padding: 5px 15px;
    border-right:1px #EEEEEE solid;
    vertical-align:top;
}
#footer-middle {
    width: 294px; /* Account for margins + border values */
    display:inline-block;
    padding: 5px 15px;
    margin: 0px 5px 5px 5px;
    border-right:1px #EEEEEE solid;
    vertical-align:top;
}
#footer-right {
    width: 270px;
    padding: 5px 15px;
    display:inline-block;
    vertical-align:top;
}
#footer-bottom {
    margin-top:5px;
    padding: 15px 15px;
    font-size:12px;
}
4

2 回答 2

0

您是在谈论您的版权标签吗？如果我理解正确，text-align:center;你footer-bottom需要

#footer-bottom {
margin-top:5px;
padding: 15px 15px;
font-size:12px;
text-align:center;
}
于 2013-05-17T08:37:18.590 回答
0

我认为您在布局方面需要这样的东西：

HTML：

<div class="wrapper">
    <div class="left">
        Content goes here
    </div>
    <div class="middle">
        Content goes here
    </div>
    <div class="right">
        Content goes here
    </div> 
</div>

CSS：

.wrapper{
   position: relative;
   float: left;
   left: 20.00%;
   width: 60.00%;
}
.left{
   position: relative;
   float: left;
   left: 0%;
   width: 32.00%;
}
.middle{
   position: relative;
   float: left;
   left: 1.50%;
   width: 32.00%;
}
.right{
   position: relative;
   float: right;
   right: 0%;
   width: 33.00%;
}

当然，您必须用您的内容填充结构，并修改边距以完全满足您的需求，但我认为您会设法做到这一点。这个例子只是为了得到这个想法。

在这里查看它的实际效果：JSFiddle

于 2013-05-17T08:51:08.203 回答