css - 另一个 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

尝试使用位置：绝对

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

Answer 2

填充旨在在您实现它的容器内添加一个缓冲。看来您会从使用保证金中受益。你应该替换“padding-top：80px;” 与“边距顶部：80px；” 你会达到预期的效果。