Question

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

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

我的jsfiddle包含3个例子。（1）一组Div块，可调整到父div的外边界。我想用textareas和iframe实现相同的功能，b）一组不使用jQuery可调整大小的textareas。添加这个来证明textareas是可以通过DEFAULT调整大小的内联块而不需要浮动：留下这些元素。 c）我的问题证明：4个textareas和一个iframe没有水平对齐并超出父容器的边界。我想解决对齐问题，并能够测试textareas可恢复性的操作方式与DIV块保持在父DIV的宽度边界内的方式相同。

另一个问题是使用jQuery UI resizable正在改变width属性从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

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

关于水平textareas对齐和宽度变化的jQuery UI可调整大小问题

1 个答案: