Question

您好如何创建可调整大小的div？

<div id="main">

</div>

#main {
    width: 100 px;
    box-shadow: #254C58 1px 0px;
    border: #3C7D91 5 px double;
    padding: 10 px 10 px 10 px 10 px;
    overflow - y: scroll;
    max-height: 433 px;
}

$(document).ready(function() {
    $('#main').resizable();

});

这是我的问题的答案：

这是一个示例，但不起作用：https://jsfiddle.net/tetut91e/2/

有人可以帮助我吗？

Answer 1

你需要添加jquery-ui.js

<div id="main"></div>

$(document).ready(function() {
 $( "#main" ).resizable();
});

我更新了您的jsfiddle代码link

Answer 2

这是你要找的东西

resize: both;

这是工作代码：this blog

Answer 3

在你的小提琴中你还没有将jQuery和jQuery UI定义为dependecies，而且你的css也存在一些问题（即：用10 px替换10px）

DEMO

#main {
    width: 100px;
    box-shadow: #254C58 1px 0px;
    border: #3C7D91 5 px double;
    padding: 10px 10px 10px 10px;
    overflow - y: scroll;
    max-height: 433 px;
    background:#f00;
    min-height:50px;
    display:inline-block;
}

Answer 4

在你的代码中，一些外部的js和css丢失了，而且css中也有错误。请找到以下工作代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<style type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css"></style>

<style>
    #main {
        width: 100 px;
        box-shadow: #254C58 1px 0px;
        border: #3C7D91 5px double;
        padding: 10px 10px 10px 10px;
        overflow - y: scroll;
        max-height: 433px;
    }
</style>
<div id="main">

</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#main').draggable();
        $('#main').resizable();

    });
</script>

可调整大小的div Css / JQuery

4 个答案: