css - 内嵌div，可自动调整宽度

如果是2格。一种是静态的，另一种是动态的。也就是说，一个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>

在上面的代码中，菜单显示的位置离徽标很远，而我需要菜单位于徽标旁边（但不应向左浮动）。而且，应调整动态div的宽度，以使其显示时不会浪费空间。

如果这超出CSS，那么任何人都建议我使用JS / jQuery代码。

非常感谢您的帮助。

最佳答案

只需从float:right删除#dynamic：

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

关于css - 内嵌div，可自动调整宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16694588/