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>

在上面的代码中，菜单显示距离徽标很远，而我需要它们除了徽标之外（但不应该向左浮动。）并且，应该调整动态div的宽度以便显示它们没有浪费空间。

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

非常感谢任何帮助。

Answer 1

只需从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％，并将80％设置为动态div：

#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%;
    }

内联div自动调整宽度

2 个答案: