1

In case of 2 divs. one is static and other is dynamic. That is one div width should be 400px (This one I call as static div as it has static width) and the other div should occupy the rest width (This one I call as dynamic div as it has dynamic width). And, the dynamic div has no fixed width and should occupy all the remaining and should float right where as static div floats on left. My main issue is while stretching the browser when the website is active, there comes the major issue. I neither want the divs to overlap or go down. I want the dynamic div's width to adjust such that the menus remain constant.

My example code:

<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>

In the above code, menus are displayed pretty far from logo whereas I need them to be just besides logo (but shouldn't be float left.) And, the width of the dynamic div should be adjusted such that they are displayed without wasting space.

If this is out of CSS then anybody please suggest me with JS/jQuery code.

Any help is highly appreciated.

4

2 回答 2

1

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

JS Bin 演示

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

#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 演示

于 2013-05-22T14:41:24.350 回答
0

这应该可以解决问题..

演示

 #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%;
    }
于 2013-05-22T14:44:38.460 回答