Question

我有一个包含2列结构的页面。

我想使用jQuery resize函数（http://api.jquery.com/resize/）使两列（div）中的一个可调整大小，但我有两个问题：

当调整左列的大小时我希望正确的一个更改css参数与另一列调整大小的px相关：例如我想在右列的边距上添加3px左栏增长3px？
我想让div只能水平调整大小并调整大小，不要使用右下角的“调整大小”，而是在边框上使用一行。

我只发布css代码，因为html似乎是“已执行”，但有两个div .sidebar和.content

.sidebar{
width: 220px;
float: left;
position: fixed;
margin-bottom: 0px;
padding-bottom: 0px;

overflow:auto;
}

.content{
float: right;
position: fixed;
padding-left: 220px;
overflow: auto;
}

Answer 1

我不明白你的问题，但我猜你实际上是在使用jQuery UI Resizable（http://jqueryui.com/demos/resizable/），而不是jquery resize（这是一个事件而不是调整大小的功能）元件）。如果是这种情况，您可以定义一个回调函数，可以在调整大小时触发。

类似的东西：

var onResized = function(){
  $("#seconddiv").css("width", 300 + (300-$("#yourdiv").width()) +"px" );

};

$("#yourdiv").resizable(stop:onResized);

在这个例子中，我假设你的div默认为300像素，因此与一个div增加的数量相同，从另一个中减去。

如果您不想允许垂直调整大小，可以添加如下回调：

$("#yourdiv").resizable({
    resize: function(event, ui) {
        ui.size.height = ui.originalSize.height;
    }
});

或者您可以将minHeight和maxHeight设置为相同的值，如下所示：

$("#yourdiv").resizable({
    minHeight: 555, maxHeight:555
});

如果您没有使用Resizable，那么我不明白您的问题。

希望它有所帮助： - ）

Answer 2

我没有完全解决问题 - 调整大小应该自动完成。

对于css使用的更改：.css()

对于jQuery的宽度/高度.width()等等

以下是您的示例：http://jsfiddle.net/9WwLC/

您可能希望使用这些来解释您的问题或发布可用的示例。

调整div的两个问题

2 个答案: