Question

我有一个页面，从一些样式细节来看，我似乎无法做到。

http://www.comehike.com/earn_money.php

它有两个问题，我似乎无法做对（主要是因为设计和造型是我的阿基里斯痊愈）。

问题1：在底部，页脚div向右伸出。我尝试将它包装在差异div中，并通过FireBug查看，但似乎无法让它停止伸出......可能是因为我累了，脑死了：）

问题2：你看到主页div如何在页脚和div之上结束？有没有办法让页面的主要区域延伸到页脚下方？

谢谢！

Answer 1

对于问题的第一部分，您可以通过简单地删除页脚上的width属性来修复它，因为它是一个块元素，它将占用可用宽度的100％（在填充/边距之后） /等）。

对于你问题的第二部分，我不太确定你在问什么，但我认为你会将#mainBody上的样式改为：padding: 5px 5px 20px;或其他一些大号为了第三个值？

Answer 2

从页脚的CSS中取出width。
如果您希望页脚位于主页面内，则必须将其置于.basic

Answer 3

将页脚div宽度从960设置为900px将固定页脚伸出

width: 900px;

problem2。布局是正确的。这就是布局

的方式

<div>
   <div class="basic">
   <div> <-- google ads
   <div> <-- footer
</div>

修复此问题只需将布局更改为此

<div>
   <div class="basic">
       <div /> <-- google ads
       <div /> <-- footer
   </div>
</div>

Answer 4

问题＃1：

您希望自己的页脚宽度为960像素。但你有一个10像素的白色边框，实际上使页脚宽980像素。删除边框，您的页脚将再次为您设计的960像素。然后，您似乎必须调整width: 960px;，直到它正确适合。 950px似乎运作良好。

.footer{
    width: 960px;
    padding: 0.5em 0;
    margin: 0 auto;
    margin-bottom: 20px;  
    text-align: center;
    vertical-align:center;
    background: #fff;
    color: #462c1f;
    border: 10px solid #fff;  
}

应该......

.footer{
    width: 950px; /* adjust the width to fit */
    padding: 0.5em 0;
    margin: 0 auto;
    margin-bottom: 20px;  
    text-align: center;
    vertical-align:center;
    background: #fff;
    color: #462c1f;
}

问题＃2：

您需要将横幅<div>和<div class="footer">...</div> 置于<div class="basic">...</div>

底部和附近

需要造型帮助 - 一个div伸出侧面。

4 个答案: