Jquery 调整div大小的两个问题

我有一个2列结构的页面

我想使用jQuery resize函数（）使两列（一个div）中的一列（一个div）的大小可调，但我有两个问题：

当左列调整大小时，我希望右列根据另一列调整大小的像素数更改css参数：例如，当左列增加3px时，我希望向右列的边距添加3px

我想使div仅在水平方向上可调整大小，并且不使用右下角的“resize are”，而是使用边框上的一条线来调整大小

我将只发布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;
}

---

我不太明白这个问题-调整大小应该自动完成

要更改css，请使用：

.css（）

用于宽度/高度

.width（）

等等

以下是您的示例：

---

您可能想用这样的方法来解释您的问题或发布可用的示例。

我不理解您的问题，但我猜您实际上使用的是jQuery UI Resizeable(http://jqueryui.com/demos/resizable/)，而不是jquery resize（这是一个事件，不是调整元素大小的功能）。如果是这样的话，您可以定义一个回调函数，在调整大小时可以触发该函数

大概是这样的：

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

};

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

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

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

在本例中，我假设您的div默认为300像素，因此一个div的增加量与另一个div的减少量相同

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

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

};

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

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

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

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

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

};

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

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

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

如果您没有使用Resizeable，那么我不理解您的问题

---

希望它能有所帮助：-）

当

左栏

增长

3px

时，将

3px

添加到

右栏

的

边距

？这肯定会迫使

右栏

完全破坏您的尺寸？（是的，但一定不要给我打电话）