Question

母版页包含2列：

左栏是JQuery UI手风琴，其宽度可以使用可调整大小的JQuery UI进行更改。
右列（主要div）应占据屏幕中剩余的水平区域。

这是使用下面的宽度样式实现的。如果使用鼠标增加手风琴宽度，则右内容（主div）将换行到下一行。

如何在调整大小后强制主div出现在手风琴div上？如何删除width = 81％并强制主div使用剩余空间？

<script type="text/javascript">
    $( "#accordion" ).resizable({       });
</script>

<body>
    <div id="container">
        <div id="accordion" style="margin: 0; clear: left; float: left; width: 17%">
            <% Html.RenderPartial("MainMenu"); %>
        </div>

        <div id="main" style="float: left; width: 81%">
            this is main content
        </div>
    </div>
</body>

Answer 1

只需将overflow:auto;放在#main而不是您的规则上。

http://www.w3.org/TR/CSS2/visuren.html#block-formatting

如何强制右侧边栏填充剩余的屏幕空间

1 个答案: