2

我的 HTML 页面中有两列。

<div id="content">
  <div id="left"></div>
  <div id="right"></div>
</div>

他们每个人都占据页面的一半

#content {
    height: 100%;
}

#left, #right {
    float: left;
    width: 50%;
    height: 100%; 
    overflow: auto;
}

我希望用户可以调整左右两半之间的边界。也就是说，用户可以在浏览页面时将边界向左或向右移动。有可能以某种方式做到这一点吗？

4

2 回答 2

4

是的，但它需要 JavaScript。要应用它，您当然可以只设置width每一边的：

var leftPercent = 50;
function updateDivision() {
    document.getElementById('left').style.width = leftPercent + '%';
    document.getElementById('right').style.width = (100 - leftPercent) + '%';
}

现在您可以使用 调整除法leftPercent = 50; updateDivision()，但用户不会这样做。您可以通过多种不同的方式将其呈现给用户。可能最合适的方式是在他们可以拖动的中间一条小线。为此，您可以使用一点 CSS 进行定位：

#content {
    position: relative;
}
#divider {
    position: absolute;
    /* left to be set by JavaScript */
    width: 1px;
    top: 0;
    bottom: 0;
    background: black;
    cursor: col-resize;
    /* feel free to customize this, of course */
}

然后确保你有一个divwith an in和 update来更新idof ：dividercontentupdateDivisionleftdivider

document.getElementById('left').style.left = leftPercent + '%';

然后你只需要一点逻辑来处理拖动。（在这里，我已将所有元素放入适当命名的变量中）：

divider.addEventListener('mousedown', function(e) {
    e.preventDefault();
    var lastX = e.pageX;
    document.documentElement.addEventListener('mousemove', moveHandler, true);
    document.documentElement.addEventListener('mouseup', upHandler, true);
    function moveHandler(e) {
        e.preventDefault();
        e.stopPropagation();
        var deltaX = e.pageX - lastX;
        lastX = e.pageX;
        leftPercent += deltaX / parseFloat(document.defaultView.getComputedStyle(content).width) * 100;
        updateDivision();
    }
    function upHandler(e) {
        e.preventDefault();
        e.stopPropagation();
        document.documentElement.removeEventListener('mousemove', moveHandler, true);
        document.documentElement.removeEventListener('mouseup', upHandler, true);
    }
}, false);

您应该能够阅读它以了解它是如何工作的，但简而言之：它会在有人按下分隔线时进行监听。当他们这样做时，它将在他们移动鼠标时将侦听器附加到页面。当他们这样做时，它会更新变量并调用updateDivision以更新样式。当它最终得到 amouseup时，它会停止在页面上监听。

作为进一步的改进，您可以使每个元素在拖动时具有适当的cursor样式，这样您的光标在拖动时不会闪烁。

试试看。

于 2013-03-16T23:13:00.683 回答
-2

部门里什么都没有，所以什么也不会发生。这就像写：

<h1></h1>

并更改 h1 的 CSS 并期望会有一些东西

于 2013-03-16T23:12:50.417 回答