0

我有一个特殊的问题。我设计了以下布局。布局根据我的意愿显示，但是当我检查标题 div 时，我发现logo和navigationdiv 显示在将光标移动到标题 div 时突出显示的部分之外。

链接到图片以供参考

徽标和导航 div 不应该在突出显示的部分中，因为它们在代码中的标题 div 中吗？或者是我做错了什么。

<div id="container">
        <div id="page">
            <div id="header">
                <div id="logo" style="float:left;" >Sample Text</div>
                <div id="navigation" style="float:right">
                    <ul style="text-decoration:none;">
                        <li>Page 1</li>
                        <li>Page 2</li>
                        <li>Page 3</li>
                        <li>Page 4</li>
                    </ul>
                </div>

            </div>
            <div id="features" style="clear:both;margin-top:15px;">
                <p>....Lorem Ipsum Part...</p>
            </div>
            <div id="footer"></div>

        </div>

    </div>

我使用了以下最小的 css

body{
    background-image : url('../images/bg-body.gif');
    background-repeat : repeat;
    font-family : Georgia;
    color : white;
}
#container{
    margin : auto;
    width : 960px;
}

#logo{
    font: 48px 'Pacifico', Helvetica, sans-serif;
    color: #FCFAFA;
    /*text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15);*/
}
#header{
    margin-top : 20px;
}
li{
    display:inline;
}
4

1 回答 1

2

基本上你需要“清除”你的浮动来调整容器的高度。所以如果你设置

overflow: auto;

在容器上，在您的情况下，header它将“封装”它是浮动的孩子。如果您想了解更多信息，这里有一个很好的教程。

于 2013-09-17T10:09:23.950 回答