-1

我现在已经阅读了很多论坛和帖子，但似乎没有什么能完全理解我的问题。我在页面底部有一个 100% 宽度的页脚（使用 WordPress 空白主题），不用担心。我在 HTML 5 挂钩内的“脚”div 中有 3 个 div。我希望内部 div“脚”具有相同的宽度并与其上方的包装器保持相同，以便它看起来与包装器的宽度相同 @ 960px 宽。我正在努力弄清楚如何做到这一点。你可以在http://newsite.dramanotebook.com看到我的代码和 css，我相信你知道如何使用 google chrome 或 firefox firebug 。让我知道您认为最好的解决方案，即使这意味着必须更改页面/页脚模板以实现我想要的。

我希望有<footer>100% 的宽度来扩大用户窗口的宽度，并将<div id="foot">其限制为 960px 宽度。这是问题所在。我想让它<div id="foot">与上面网站的其他部分保持垂直对齐。<div id="wrapper"></div>我指的是。

<div id="wrapper" class="hfeed">
<header>

<div id="branding">
</header>
<div id="container">
<div id="main" class="clearfix">
<!-- I have removed all the bloat in the middle to keep to my issue at hand -->
</div>
<div class="clear"></div>
</div> <!-- end of container div -->
</div> <!-- end of wrapper div -->
<footer> <!-- what I was referring to by HTML hook, my apologies "element"-->
<div id="foot">
    <div id="left-footer">
        <div id="trustwave_img">
            <script type="text/javascript" src="https://sealserver.trustwave.com/seal.js?code=5d243334f2474482a03b5e1f5d5fe4f5"></script>
        </div>
    </div>
    <div id="center-footer">

    </div>
    <div id="right-footer">

    </div>
</div>
</footer>

下面是我目前拥有的相关 CSS，我相信这里有更聪明的人可以帮助我改进以达到我需要的地方，并在此过程中学到一些东西 :)。

body {
  font-size: 16px;
  font-family: Tahoma, Helvetica, Verdana;
  color: #424242;
  line-height: 1.4em;
  background: #fdffd0;
}

#wrapper {
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
  Position: relative;
  background: #fff;
  padding: 0 10px;
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc;  

}
#container {
  position: relative;
  overflow: hidden;
  clear: both;
    padding-bottom: 40px;
}
footer {
  clear:both;
  width: 100%;
  height: 150px;
    border-top: 1px solid #eee;
    background-color: #A4EDA1; /*#9BE398;*/
    opacity: .8;
}
footer #foot {
    width: 960px;
    height: 150px;
    margin-left: 127px;
    position: relative;
}
#left-footer {
    width: 241px;
    height: 100%;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
}
#center-footer {
    width: 496px;
    margin-left: 365px;
    height: 100%;
}
#right-footer {
    width: 240px;
    float: right;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

谢谢，吉姆

4

2 回答 2

1

#foot以保证金自动为中心。

footer #foot {
    width: 960px;
    height: 150px;
    margin: 0 auto;
    position:relative;
}
于 2013-02-24T11:29:46.457 回答
0

margin: 0 auto;不适用于元素的原因#foot是因为您绝对将内部<div>s 定位在该元素中。当您绝对定位它们时，您将它们从文档的默认流中取出，并且边距和浮动将不再适用。

你只需要删除...

position: absolute;
top: 0;
left: 0;

...来自#left-footerand#right-footer选择器。

如果您想在该元素中创建一个三列页脚，则无需为每个子元素指定不同的浮动、边距等<div>。相反，只需使用：

footer {
    overflow: hidden; /* Used to clear floats */
    width: 100%;
}
footer > div {
    box-sizing: border-box; /* To define the total width (padding plus border, if any) at the specified width and not more */
    float: left;
    width: 33%;
}

p/s：您的 CSS 存在一些问题 - 没有必要清除<footer>元素中的浮动（没有意义），并且该position属性已拼错为#wrapper. 您<div id="header">在您发布的 HTML 代码中也没有正确关闭。

于 2013-02-24T12:30:02.303 回答