>我在使用 jQuery-UI 可调整大小方法的 4 个文本区域和一个 iframe 的水平对齐方面遇到了问题。 每个文本区域和 iframe 都垂直堆叠，即使我在面板中使用 float：left .class水平对齐
。我注意到的第二个问题是每个可调整大小的元素都被声明了 宽度为 100px，但宽度更改为 93px，当使用 Chrome 开发工具查看时，它会显示(通过使用可调整大小？
我的 jsfiddle 包含 3 个示例。(1) 一组可调整大小到父div 外部边界的 Div 块。我想通过文本区域和 iframe 实现相同的功能，b) 一组不使用 jQuery 可调整大小的文本区域。 添加此内容是为了证明文本区域是内联块，默认情况下可以调整大小，而无需浮动：离开这些元素。c) 演示了我的问题：4 个文本区域和一个 iframe，它们不水平对齐并超出父容器的边界。我想解决对齐问题，并能够测试文本区域的大小可调整性是否以与保持在父 DIV 宽度边界内的 DIV 块相同的方式运行。
另一个问题是使用jQuery UI可调整大小正在更改width属性。 从 100 像素到 93 像素。 我希望第二个问题不违反任何我可能不知道的发布规则。
谢谢你的时间。
我的[JSFIDDLE][1][1]：https://jsfiddle.net/KerryRuddock/nbLhvg09/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable</title>
<link rel="stylesheet" href="jqueryui/jquery-ui.css">
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="jqueryui/jquery-ui.js"></script>
<style>
* { padding:0; box-sizing: border-box; }
.h-mt50 { margin-top:50px; }
#div-wrap {
height:40px;
width:400px;
border:1px solid black;
font-size:0px;
}
#d1, #d2, #d3, #d4, #d5 {
height:40px;
width:40px;
display: inline-block;
}
#textarea-wrap {
height:100px;
width:100%;
border:1px solid black;
font-size:0px;
}
#t1, #t2, #t3, #t4, #t5 {
height: 100px;
width: 100px;
box-sizing: border-box;
float:left;
resize:horizontal;
}
#d1, #t1 { background: lime; }
#d2, #t2 { background: teal; }
#d3, #t3 { background: gold; }
#d4, #t4 { background: aqua; }
#d5, #t5 { background: pink; }
</style>
</head>
<body>
<h2 class="h-mt50">Resizable Div blocks</h2>
<div id="div-wrap">
<div id="d1" class="box"></div>
<div id="d2" class="box"></div>
<div id="d3" class="box"></div>
<div id="d4" class="box"></div>
<div id="d5" class="box"></div>
</div>
<h2 class="h-mt50">TextArea - no added jQuery UI </h2>
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
<h2 class="h-mt50">Resizable TextArea blocks</h2>
<div id="textarea-wrap">
<textarea id="t1" class="panel"></textarea>
<textarea id="t2" class="panel"></textarea>
<textarea id="t3" class="panel"></textarea>
<textarea id="t4" class="panel"></textarea>
<!-- <iframe id="t5" class="panel"></iframe> -->
</div>
<script>
$( function() {
$(".box" ).resizable({
containment: "#div-wrap",
grid: 20,
maxWidth: 200,
minWidth: 40,
handles: "e",
resize: function(event ,ui){
var parent = ui.element.parent();
var siblingWidth = 0;
ui.element.siblings().each(function() {
siblingWidth += $(this).width();
});
if ( parent.width() <= siblingWidth + ui.element.width() ) {
ui.element.width( parent.width() - siblingWidth );
}
}
});
$(".panel" ).resizable({
containment: "#textarea-wrap",
grid: 20,
maxWidth: 200,
minWidth: 40,
handles: "e",
resize: function(event ,ui){
var currentWidth = ui.size.width;
// this accounts for some lag in the ui.size value, if you take this away
// you'll get some instable behaviour
$(this).width(currentWidth);
var parent = ui.element.parent();
var siblingWidth = 0;
ui.element.siblings().each(function() {
siblingWidth += $(this).width();
});
if ( parent.width() <= siblingWidth + ui.element.width() ) {
ui.element.width( parent.width() - siblingWidth );
}
}
});
});
</script>
</body>
</html>
一个人在 3 个月内能学到的东西真是太神奇了。 自己修复了这个问题并更新了这个小提琴
你可以看到我在 CSS 中添加了 .ui-wrapper{ float: left };