如何在不使用 jQuery 或 Javascript 调整框旁边的框的情况下调整框的大小？

Question

我正在尝试调整一个框（橙色框）的大小，但我的问题是我只能将其调整到右侧和底部，但我无法将其调整到顶部（我只想能够将其调整到顶部）。

另外，在将其调整到顶部后，我不希望它调整绿色框的大小（我希望绿色框是静态的，这意味着我不希望它改变大小，橙色盒子应该在它上面）。我已经尝试过，但无法得出好的结果。使用 jQuery 或纯 JavaScript 对我来说效果很好。

这是我的代码：

<html>
 <head>
  <meta charset="utf-8">
  <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script><!-- CSS -->
  <script>
     $(function() {
        $( "#orangeBox" ).resizable();
     });
  </script>
 </head>
 <body>
  <div id="greenBox" class="ui-widget2"> 
  <p>This is some text</p>
  <p>This is some text</p>
  <p>This is some text</p>
  <p>This is some text</p>
  </div>
  <p></p>
  <div id="orangeBox" class="ui-widget"> 
  <p>This is the Orange Box</p>
  </div>
 </body>
</html>

CSS代码：

.ui-widget {
   background: orange;
   border: 1px solid #DDDDDD;
   color: #333333;
}
.ui-widget2 {
   background: #cedc98;
   border: 1px solid #DDDDDD;
   color: #333333;
}
#orangeBox { 
   width: 300px; height: 150px; padding: 0.5em;
   text-align: center; margin: 0;border:2px solid black; 
}
#greenBox { 
   width: 340px; height: 150px; padding: 0.5em;
   text-align: center; margin: 0; border:2px solid black;
}

Answer 1

你可以这样做：

$(function() {
    $( "#orangeBox" ).resizable({
        handles:'n,e,s,w'  //top, right, bottom, left
    });
 });

JSFiddle 中的工作示例 Link：http://jsfiddle.net/sandenay/hyq86sva/1/

编辑：

如果您希望它发生在 button 点击：

 $(".btn").on("click", function(){
     var height = $("#orangeBox").offset().top; // get position from top
     console.log(height);
    $("#orangeBox").animate({
        height: "+="+height+'px'
    }, 1000);

 });

并将此添加到您的 HTML:

<button class="btn">Click here to resize</button>

工作 fiddle: http://jsfiddle.net/sandenay/hyq86sva/4/

Answer 2

在你的脚本中试试这个：

$(函数() { $( "#orangeBox" ).resizable({ 句柄：'n, e, s, w' }); });

希望对您有所帮助！！

如何在不使用 jQuery 或 Javascript 调整框旁边的框的情况下调整框的大小？

How can I resize a box without resizing the box next to it using jQuery or Javascript?

javascript

jquery

resize