4つのtextareasの水平方向の整列と、jQuery-UIのサイズ変更可能なメソッドを使用しているiframeに問題があります。私はfloatを使用していても、各textareaとiframeは縦に積み重なって表示されます。jQuery UIのサイズ変更可能な水平テキストエリアの整列と幅の変更
2番目の問題は、それぞれのサイズ変更可能な要素が幅100pxの と宣言されましたが、幅が93pxに変更されています（サイズ変更可能？を使用してから）。
私のjsfiddleには3つの例があります。 （1）親divの外側境界にサイズ変更可能なDiv Blockのグループ。 textareasとiframeで同じ機能を実現したい、b）サイズ変更可能なjQueryを使用しないテキストエリアのグループ。 textareasが浮動小数点でデフォルトでサイズ変更可能なインラインブロックであることを示すために、これを追加しました。これらの要素はそのままです。 c）問題が実証されました：4つのテキストエリアと1つのiframeが水平に整列せず、親コンテナの境界を超えて流れます。私は、整列の問題を解決し、そのDIVブロックが親DIVの幅の境界内にとどまるのと同じ方法で、テキスト領域のサイズ変更が動作することをテストすることができます。
もう1つの問題は、サイズ変更可能なjQuery UIを使用すると、widthプロパティ が100pxから93pxに変更されてしまうことです。この2番目の質問が私が気づいていない投稿ルールに違反しないことを願っています。
ありがとうございます。
私の[jsfiddle] [1] [1]：3ヶ月で学ぶことができるものを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>