在另一个div中填充div会影响其他元素

Question

您好我正在尝试创建一个导航栏，该导航栏由一个大导航div中的几个div容器组成。

我不确定我的做法是否正确，但我试图这样做：

<div id="navigation">

    <div class="innen">
        <div class="logo">
            <a href="index.html"><img class= "logo" src="logo.png" title="Logo"/></a>
        </div>

        <div id="bar">
        <!-- Navigation Items are in here --!>
        </div>

        <div id="gamecard">
        <!-- Another right floated Element !-->
        </div>
    </div>
    <div class="unten">
        <p>You are here: <a href="index.html">Main</a></p>
    </div>
</div>

我想通过使用顶部填充来向下推条形div以满足图像的高度：

#bar{
padding-top: 80px;
}

但现在它也会移动游戏卡的容器。我怎样才能防止这种情况发生？

我还添加了一个jfiddle： http://jsfiddle.net/Cv4p2/

Answer 1

尝试使用position：absolute

<div id="bar" style="position:absolute; padding: 80px 0 0 0">
</div>

Answer 2

填充旨在在您实施它的容器内添加缓冲垫。您似乎可以从使用保证金中受益。你应该替换“padding-top：80px;” “margin-top：80px;”你会达到预期的效果。