Question

我有这段代码：

<div id="wrap">
        <div id="nav-bar">
            <img id="logo" src="Logo.png" />
            <div id="nav-wrap">
                <ul id="nav">
                    <li class="nav-item"><a href="#">Introduction</a></li>
                    <li class="nav-item"><a href="#">History</a></li>
                    <li class="nav-item"><a href="#">Implementation</a></li>
                    <li class="nav-item"><a href="#">Weaknesses</a></li>
                </ul>
            </div>
        </div>
        ...otherdivs
</div>

和这个css：

html, body
{
    font-family:"Century Gothic", Helvetica, Arial;
    top: 0;
    left: 0;
    margin: 0;  
    padding: 0;
    background-color:#f4f1ec;
    background-image:url(bgtile.png);
    color: #60590d;
}

div#nav-bar
{
    background-image:url(navtile.png);
    height: 70px;
    width: 100%;
    position:fixed;
    z-index: 1000;
}

div#nav-wrap
{
    margin-right: 20%;
    float:left;
    position:absolute;
    right: 0;
    width: auto;
}
img#logo
{
    padding: 17px;
    padding-left: 20%;
    height: 48%;
    width: auto;
    position:absolute;
    float:left;
}

现在我想要的是一个贴在页面顶部的菜单栏，左侧是徽标，右侧是菜单项。当屏幕调整大小时，菜单项应转到下一行而不是重叠图像。导航栏也应该覆盖该变化的高度。我尝试了无数组合，但无济于事，这可能吗？

- 编辑 - 还是有两种方法可以并排，直到它们发生碰撞，然后并排停下来？

Answer 1

检查这个小提琴http://jsfiddle.net/R2HYH/

<强> CSS

html, body
{
    font-family:"Century Gothic", Helvetica, Arial;
    top: 0;
    left: 0;
    margin: 0;  
    padding: 0;
    background-color:#f4f1ec;
    background-image:url(bgtile.png);
    color: #60590d;
}

div#nav-bar
{
    background-image:url(navtile.png);
    height: 70px;
    width: 100%;
    position:fixed;
    z-index: 1000;
}

div#nav-wrap
{
    margin-right: 20%;
    float:left;
    right: 0;
    width: auto;
}
img#logo
{
    padding: 17px;
    padding-left: 20%;
    height: 48%;
    width: auto;
    float:left;
}

Answer 2

带走

position:absolute;

从：

div#nav-wrap

和

img#logo

或将其更改为：

position:relative;

JsFiddle

Answer 3

在div#nav-wrap删除

position:absolute; right: 0;

在img#logo移除position:absolute;

如何让左浮点div不重叠右浮点div

3 个答案: