Question

我在调整我的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;
}

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

另外，请注意，midpane也与标题有差距。这是因为我在midpane div中使用了

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

Answer 1

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

p
{
    margin:0;padding:0;
}

<强> FIDDLE

Answer 2

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

#midpane {
    display: inline-block;
}

jsFiddle

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

如何定位div，使<p>标签不会破坏位置？</p>

2 个答案: