自动调整宽度的内联 div

Question

如果是 2 个 div。一个是静态的，另一个是动态的。也就是说，一个 div 的宽度应该是 400px（这个我称之为静态 div，因为它具有静态宽度），另一个 div 应该占据其余宽度（这个我称之为动态 div，因为它具有动态宽度）。而且，动态 div 没有固定宽度，应该占据所有剩余部分，并且应该在静态 div 在左侧浮动的地方浮动。我的主要问题是在网站处于活动状态时拉伸浏览器时，出现了主要问题。我不希望 div 重叠或下降。我想调整动态 div 的宽度，使菜单保持不变。

我的示例代码：

<style type="text/css">
    body{
        margin:0px;
    }
    #wrap{
        width:100%;
        min-width:1000px;
    }
    #static{
        width:400px;
        float:left;
        background-color:#930; /* Just to differentiate DIV */
    }
    #dynamic{
        float:right;
        background-color:#CF0; /* Just to differentiate DIV */
    }
    .menus{
        display:inline-block;
        padding-left:5px;
        padding-right:5px;
            width:80px;
    }
</style>
<div id="wrap">
    <div id="static">
        Logo comes here
    </div>
    <div id="dynamic">
        <div class="menus">
            Menu1
        </div>
        <div class="menus">
            Menu1
        </div>
        <div class="menus">
            Menu1
        </div>
        <div class="menus">
            Menu1
        </div>
        <div class="menus">
            Menu1
        </div>
        <div class="menus">
            Menu1
        </div>
    </div>
</div>

在上面的代码中，菜单显示在离 logo 很远的地方，而我需要它们在 logo 旁边（但不应该向左浮动。）并且，应该调整动态 div 的宽度，以便显示它们不浪费空间。

如果这不是 CSS，那么请任何人建议我使用 JS/jQuery 代码。

非常感谢任何帮助。

Answer 1

只需从#dynamic 中删除float:right：

JS Bin demo

---

要均匀分布菜单项，请执行以下操作：

#dynamic
{
    background-color:#CF0; /* Just to differentiate DIV */
    display:table;
    width: 100%;
}

.menus
{
    display:table-cell;
    text-align:center;
}

JS Bin 演示：http://jsbin.com/emulux/2

---

第三部分...

在静态 div 上设置百分比宽度，如 20%，为动态 div 设置 80%：

#static
{
    float:left;
    background-color:#930; /* Just to differentiate DIV */
    width: 20%;
}

#dynamic
{
    background-color:#CF0; /* Just to differentiate DIV */
    display:table;
    width: 80%;
}

.menus
{
    display:table-cell;
    text-align:center;
}

JS Bin demo

Answer 2

这应该可以解决问题..

DEMO

 #static{
        width:400px;
        float:left;
        background-color:#930; /* Just to differentiate DIV */
        display:inline; /*New Line */
    }
    #dynamic{
      /*  float:right;*/
        background-color:#CF0; /* Just to differentiate DIV */
        width:100%;
    }