javascript - 怎么做元素动态调整以填充浏览器窗口的整个宽度

Question

假设我有四个<li>元素占据了width:25%整个文档窗口中的每一个。如果我想使用 jQuery-UI resizable() 来调整这些元素的大小，我怎样才能确保它们的宽度总加起来是 100%？这样，如果我缩小一个元素的宽度，相邻的元素会弥补它吗？

我有这个小提琴作为一项正在进行的工作：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