Question

我的第2页div：一个（左）有菜单，第二个（右）有内容。右div必须具有800px的宽度并且水平居中。我希望左div填补所有剩余的空间。

我尝试将div的显示设置为table-cell或将float设置为左右，并放入宽度为100％的left div span元素，但它不起作用。

有没有办法让div看起来像我想要的那样？

Answer 1

试试这个：

<强> HTML

<div id="left">
    Menu
</div>
<div style="text-align: center;">
<div id="right">
    Content
</div>
</div>

<强> CSS

#left {
    background-color: green; /*for demonstration purposes*/
    float:left;
}

#right{
    background-color: blue;
    width: 800px;
}

<强> JS

$(document).ready(function(){
    var width = $(document).width();
    var rightDivWidth = $("#right").width();
    var leftDivWidth = width - rightDivWidth;
    $("#left").css("width", leftDivWidth);
});

Demonstration

当右div具有固定宽度时，使左div填充所有可用空间

1 个答案: