Javascript Jquery和Jqueryui：设置宽度在使用可调整大小后不起作用？

我正在写一个网格来显示任务持续时间

我在display:block中有一组div，当文档准备就绪时，我使用javascript和jqueryui： 1） 将子div添加到块div 2） 使子div可拖动并可调整大小 这个很好用。 我还想预设divs宽度（任务持续时间），但有一个奇怪的行为：加载文档后，div不会调整大小。但是，只要我单击div边框来调整其大小，宽度“pops”就会变为我在脚本中使用的值

下面是简化的HTML

<div id="gridcontainer">
    <div id="railing_1" class="railing"></div>      
    <div id="railing_2" class="railing"></div> 
</div>

下面是html文档头部的JS：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <script type="text/javascript">

            var displayRange = { "slots": "24", "unit":"h","start":"0" };
            var taskList = {
                "tasks": [
                { "id":"1" , "line":"1", "start":"0","duration":"72" }, 
                { "id":"2" , "line":"1", "start":"73","duration":"48" }, 
                { "id":"3" , "line":"2", "start":"0","duration":"120" }
                ]
            };
    </script>
    <script type="text/javascript">
        $().ready(function(){
            var railingId;
            var taskId;
            var jTaskId;
            var oNewP;
            var oText;
            var displayRange = { "slots": "24", "unit":"h","start":"0" };
            var taskList = {
                "tasks": [
                { "id":"1" , "line":"1", "start":"0","duration":"72" }, 
                { "id":"2" , "line":"1", "start":"73","duration":"48" }, 
                { "id":"3" , "line":"2", "start":"0","duration":"120" }
                ]
            };
            //get the task list and create/append the children to each line
            for(var i = 0; i<taskList.tasks.length; i++){
                //alert(taskList.tasks[i].duration);
                railingId = "railing_" + taskList.tasks[i].line;
                taskId = "task_" + taskList.tasks[i].id;
                oNewP = document.createElement("div");
                oText = document.createTextNode(taskList.tasks[i].id);
                oNewP.setAttribute("id",taskId);
                oNewP.setAttribute("class","taskbar");
                oNewP.appendChild(oText);
                document.getElementById(railingId).appendChild(oNewP);
                jTaskId = "#" + taskId;
                $(jTaskId)
                    .draggable({ 
                                grid: [ 24, 44 ],
                                containment: "#gridcontainer",
                                axis: "x, y" 
                                })
                    .resizable({
                                grid: [ 24, 0 ],
                                handles: "e, w",
                                containment: "#gridcontainer"
                                });
            }
         });

/*
Here is where I try to preset one of the tasks as an example; I've also
tried using $('#task_2').width("100");
but didn't work
*/

             $('#task_2').css("width","100px");
     </script>

var displayRange={“slots”：“24”，“unit”：“h”，“start”：“0”}；
变量任务列表={
“任务”：[
{“id”：“1”，“line”：“1”，“start”：“0”，“duration”：“72”}，
{“id”：“2”，“line”：“1”，“start”：“73”，“duration”：“48”}，
{“id”：“3”，“行”：“2”，“开始”：“0”，“持续时间”：“120”}
]
};
$（）.ready（函数（））{
var-railingId；
var-taskId；
var jTaskId；
var-oNewP；
VAROTEXT；
var displayRange={“slots”：“24”，“unit”：“h”，“start”：“0”}；
变量任务列表={
“任务”：[
{“id”：“1”，“line”：“1”，“start”：“0”，“duration”：“72”}，
{“id”：“2”，“line”：“1”，“start”：“73”，“duration”：“48”}，
{“id”：“3”，“行”：“2”，“开始”：“0”，“持续时间”：“120”}
]
};
//获取任务列表，并在每行中创建/附加子项
对于（var i=0；i此Stackoverflow线程上发现的问题的根）：


内联元素没有宽度，因此这不是Javascript问题。问题在于CSS定义。删除了display:INLINE指令，它工作正常

感谢大家在SO中发布一些精彩的信息