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

Question

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

我尝试将 div 的显示设置为表格单元格或将浮动设置为左右并放入宽度为 100% 的左侧 div 跨度元素，但它不起作用。

有没有办法让 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);
});

示范