位置：相对包裹和元素高度？

Question

我有一个简单的TextArea和一个按钮

单击该按钮时，我需要wrap（确切地说）带有红色div（border:solid 1px red）的文本区域

p.s这个包装div必须是position:relative，因为我需要添加未来的绝对定位元素

所以我写了这段代码：

$(".btn").on('click',function (){

 $(".myTextArea").wrap($('<span/>', {
                    "class": 'msgAbsWrap',
                    "style": "position:relative;display:inline" /*it's inline by default ,I know*/

                }));
});

但问题是它没有按原样包装它：

• 为什么会这样？
• 如何使红色div（确切地）包裹textarea？

<击> JSBIN

P.S。我使用chrome v 26。

修改

（我的不好）我忘了从textArea中删除宽度（1000次测试后）。它应该是width:100%。你现在可以试试吗？

JSBIN NEW

Answer 1

将范围的显示样式更改为display: inline-block;

$(".myTextArea").wrap($('<span/>', {
    "class": 'msgAbsWrap',
    "style": "position:relative; display:inline-block; width: 100%;"
}));

演示：JSBIN

Answer 2

您可以执行这些更改以实现效果：

CSS：

.msgAbsWrap {
   border:solid 1px red;
   display:inline-block;
   width:100%;
   position:relative;
}

jQuery的：

$(".btn").on('click', function () {
  $(".myTextArea").wrap($('<span/>', {
        "class": 'msgAbsWrap'
  }));
});

Checkout the updated fiddle

Answer 3

将其更改为：

$(".btn").on('click',function (){
    $(".myTextArea").attr('class', 'msgAbsWrap');
});

jsbin：http://jsbin.com/izopaz/12/

Answer 4

这样做：

$(".btn").on('click',function (){

 $(".myTextArea").wrap($('<div></div>', {
    "class": 'msgAbsWrap',
    "style": "position:relative;"
 }));

});

选中此示例：jsbin