0

我在调整我的 div 位置时遇到了这个问题。我已经分离了许多 div，因此它们代表页眉、菜单窗格、右窗格、左窗格和页脚。请查看 jsfiddle 中的代码：http: //jsfiddle.net/Kj5pe/

代码是，html：

<div id="main">
        <div id="header">
        </div>
        <div id="menu">
            <a href="#" class="buttons">Aaaa</a>
            <a href="#" class="buttons">Eeee</a>
            <a href="#" class="buttons">Iiii</a>
            <a href="#" class="buttons">Oooo</a>
            <a href="#" class="buttons">Uuuu</a>
        </div>
        <div id="leftpane">
            <p>Hello</p>
        </div>
        <div id="rightpane">
            <p>Hello</p>
        </div>
        <div id="midpane">
            <p>Hello</p>
        </div>
        <div id="footer">
            <p>Copyright &copy;</p>
        </div>
</div>

和CSS：

#main
{
    width: 65em;
    height: 35em;
    margin: auto;
}

#header
{
    background-color: #ffb400;
    height: 5em;
}

#menu
{
    background-color: #ffe63e;
    height: 3em;
}

.buttons
{
    text-decoration: none;
    border: 1px #ffb400;
    color: #001e59;
    line-height: 3em;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    display: block;
    font-family: consolas ,Segoe UI, courier new;
}

.buttons:hover
{
    background-color: #ffb400;
}

#leftpane
{
    height:25em;
    width: 15em;
    float: left;
    background-color: #b8c3d9;
    text-align: center;
    color: white;
    text-shadow: -1px 1px #000000;
}

#rightpane
{
    height:25em;
    width: 15em;
    float: right;
    background-color: #b8c3d9;
    text-align: center;
    color: white;
    text-shadow: -1px 1px #000000;
}

#midpane
{
    background-color: #a1abbf;
    height: 25em;
    width: 35em;
    margin: auto;
    text-align: center;
    color: white;
    text-shadow: -1px 1px #000000;
}

#footer
{
    height: 1.8em;
    background-color: #ffb400;
    margin-top: -1em;
    text-align: center;
    line-height: 1.8em;
    color: #ffffff;
    text-shadow: -1px 1px #000000;
}

请注意页脚有 margin-top: -1em ......我必须这样做。否则，页脚和其他 div 之间会有间隙。为什么会这样？它不会发生在其他 div 上，但为什么只有页脚？

另外，请注意中间窗格与标题之间也有一个间隙。这是因为我用

中间窗格 div 内的标签。如果我删除它们，一切都会恢复正常。但我为什么要诉诸于此？为什么会这样？我在左右窗格中做同样的事情，但这不会发生。为什么中间窗格是唯一表现不同的窗格？

4

2 回答 2

2

您需要将 p 标签重置为没有边距/填充

p
{
    margin:0;padding:0;
}

小提琴

于 2013-06-30T11:58:21.370 回答
1

如果您不想干扰 p 标签的样式（因此您保留段落的格式）。你也可以这样设置：

#midpane {
    display: inline-block;
}

jsFiddle

通过将浮动显示的 div 设置为内联块，边距/填充不应影响 div。

于 2013-06-30T12:05:48.923 回答