可调整大小 div Css / JQuery

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();

});

这是我的问题的 jsfiddle：

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

有人可以帮助我吗？

Answer 1

你需要添加jquery-ui.js

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

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

我更新了你的 jsfiddle 代码link

Answer 2

在您的 Fiddle 中，您没有将 jQuery 和 jQuery UI 定义为依赖项，而且您的 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 3

这就是你要找的东西

resize: both;

这里是工作代码：https://jsfiddle.net/tetut91e/5/

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

Resizable div Css / JQuery

html

css

jquery

resizable