我正在尝试弄清楚如何创建一个可以调整大小以包含更多或更少周围文本的元素。
这可能不在正确的轨道上，但我这里有一个代码笔，https://codepen.io/anon/pen/GvWpmV，蓝色背景中有一个可调整大小的div。当div 被拖动到右侧时，它会将文本推倒。我需要做的是让文本保持在原位，但现在被蓝色div 包围。收缩div 时应该发生相反的情况。任何帮助都非常感谢。
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Drag element test</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#blue-div {background-color: blue;
display: inline-block;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#blue-div" ).resizable({ghost: true});
});
</script>
</head>
<body>
<!-- HTML -->
<div id="main">
There is some text here. I would like to change the text in the blue div.
<div id="blue-div" class="ui-widget-content">blue</div>
more words here.
</div>
</body>
</html>
编辑添加：最终产品在页面上有一个文本块，其中短部分包裹在自定义元素中，这会改变外观。当用户单击元素时，jquery 事件将触发，该事件会突出显示该区域并打开表单。用户可以编辑或删除与自定义元素相关的信息。
我需要添加的是用户拖动自定义元素以包含或多或少周围文本的功能。例如，用户可以单击该元素，然后调整其大小，以便 html 从
This <el>is</el> a test
自
This <el>is a</el> test
为蓝色<div>指定比文本更高的position: absolute和z-index值。
#blue-div {
background-color: blue;
display: inline-block;
z-index: 99;
position: absolute;
}
#main {
z-index: 98;
position: relative;
}
另外，我不确定为什么你的CSS是内联的？