Question

假设我有四个<li>个元素，每个元素占用整个文档窗口的width:25%个。如果我想使用jQuery-UI resizable（）来调整这些元素的大小，我怎样才能确保它们的宽度总是高达100％呢？这样，如果我缩小其中一个元素＆＃39;宽度，相邻的元素弥补了吗？

我将这个小提琴作为一项正在进行的工作：http://jsfiddle.net/kVwRC/6/show/

这个演示正如我所做的那样：http://layout.jquery-dev.net/demos/simple.html

Answer 1

我做了一些与div类似的东西来创建你想在这里做的那种布局。我已经制作了一个名为jSplit的插件，并在Google Code上传了代码。你可以继续看一看。

当用户拖动滑块时，想法是计算相邻元素的宽度/高度。

Answer 2

这是你可以做到的一种方式。

它使用css表行为来确保每个面板和js划分所有空间以管理每个面板宽度的调整。

<div class="table">
    <div class="row">
        <div class="cell"></div>
        <div class="handle"></div>
        <div class="cell"></div>
        <div class="handle"></div>
        <div class="cell"></div>
        <div class="handle"></div>
        <div class="cell"></div>
    </div>
</div>

演示：http://jsfiddle.net/louisbros/CuqJr/show

如何动态调整<li>元素以填充浏览器窗口的整个宽度</li>

2 个答案: