可调整大小的 div Css / JQuery答案

【问题标题】：Resizable div Css / JQuery可调整大小的 div Css / JQuery
【发布时间】：2016-07-19 11:40:09
【问题描述】：

嗨，我怎样才能创建一个可调整大小的 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/

有人可以帮我吗？

【问题讨论】：

我认为你需要同时使用 js 和 css 文件。 jqueryui.com/resizable

标签： jquery html css resizable

【解决方案1】：

你需要添加jquery-ui.js

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

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

我更新了你的 jsfiddle 代码link

【讨论】：

【解决方案2】：

这就是你要找的东西

resize: both;

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

【讨论】：

你的例子很酷，但它在我的代码中不起作用我的 div 充满了 dc.js 图表，但它不一样吗？不管 div 里有什么还是？

【解决方案3】：

在您的 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;
}

【讨论】：

【解决方案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>

【讨论】：