div右侧的图像边框用于观看jquery'；选择'；

我有一个使用jquery resize的div

$( "#jobDisplay" ).resizable({ })

该div的右侧还有一个边框图像

问题：jqueryresize方法只允许在div的边缘调整div的大小，而我的边框在div内部（我使用的是背景图像）。如何将图像边框与此jquery调整得更近（通过将jquery上的调整大小触发器向左移动几个像素，或将div边框向右移动几个像素）

例如：

另外，在我的代码中，如果我尝试重新划分div的左/右方向，我会在div上抓取7个像素来移动它，但是在jsfiddle中，我只有2个像素？不知道为什么会发生这种情况，但我也希望能够编辑该值（例如：将其设置为10像素，以便用户可以更轻松地选择）

无论解决方案是什么，都需要尽可能实现跨浏览器兼容

编辑：换句话说，现在它在红线（上图）处调整大小。我希望它在底线处调整大小：

根据添加句柄元素非常容易。我想这样做：

#jobDisplay {
    ...
    position: relative;
}
.ui-resizable-handle-e {
    position: absolute;
    width: 25px;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
}

<div id="jobDisplay">
    <div class="ui-resizable-handle ui-resizable-handle-e"></div>
    ...

$("#jobDisplay").resizable({
    stop: function (event, ui) {},
    handles: {
        "e": ".ui-resizable-handle-e"
    }
});

作业显示{ ... 位置：相对位置； } .ui-resizable-handle-e{ 位置：绝对位置； 宽度：25px； 右：0； 排名：0； 底部：0； 光标：指针； } ... $（“#作业显示”）。可调整大小({ 停止：函数（事件，ui）{}， 处理：{ “e”：“.ui-resizable-handle-e” } });

---

您可以使用

.ui-resizable-se {
    /* Adjust resize-handle */
    right: 5px;
    bottom: -2px; 
}

---

jsidle:

您可以将内容包装到另一个div中，如下所示：

嘿，dfgdfgdfg dfg

hey2 dfgdfgdfgdfg

hey3 sdfsdfsdf

Answer更新为使用类选择器以实现可重用性。我将不得不进一步研究这个问题，但这似乎是一个方向。将光标更改为ew resize并进行一些其他调整应该可以解决我遇到的问题，tnx。这会移动小的“resize”图标，但我希望最终摆脱它。我只希望用户使用DIV的右边缘调整大小。

<div id="jobDisplay">
  <div class="wrap">
   <span>hey dfgdfgdfg dfg </span><br />
   <span>hey2 dfgdfgdfgdfg</span><br />
   <span>hey3 sdfsdfsdf</span><br />
  </div>
</div>