jQuery UI 水平文本区域对齐和宽度变化的可调整大小问题

Question

我在使用 jQuery-UI 可调整大小方法时遇到 4 个文本区域和 iframe 的水平对齐问题。每个 textarea 和 iframe 都显示为垂直堆叠，即使我在面板中使用 float:left。class 水平对齐。

我注意到的第二个问题是声明了每个可调整大小的元素宽度为 100px，但是当使用 chrome 开发工具查看时，宽度被更改为 93px（由于使用可调整大小？）。

我的 jsfiddle 包含 3 个示例。 (1) 一组 Div 块，可根据父级 div 的外边界调整大小。我想用文本区域和 iframe 实现同样的功能，b) 一组不使用 jQuery 可调整大小的文本区域。添加此内容以证明文本区域是内联块，默认情况下可调整大小而无需 float:left 这些元素。 c) 我的问题演示：4 个文本区域和一个 iframe 没有水平对齐并且超出父容器的边界。我想解决对齐问题，并能够测试 textareas resizability 的运行方式与 DIV 块保持在父 DIV.

宽度边界内的方式相同

另一个问题是使用 jQuery UI resizable 会改变宽度属性从 100px 到 93px。我希望第二个问题没有违反任何我可能不知道的发帖规则。

感谢您的宝贵时间。

我的[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>

Answer 1

一个人在 3 个月内可以学到的东西真是太神奇了。我自己解决了这个问题并更新了这个 fiddle

你可以看到我添加了 .ui-wrapper { float: left }; 到 CSS

jQuery UI 水平文本区域对齐和宽度变化的可调整大小问题

jQuery UI resizable issues on horizontal textareas alignment and width changing

jquery

textarea

jquery-ui

resizable