Javascript 什么'；这是制作可调整大小的三列布局的最干净的方法吗？

如果标题不是描述性的，很抱歉，但是我正在使用HTML5画布使用javascript开发一个基于web的应用程序。我希望页面能够根据窗口大小进行调整，但我也希望列能够调整大小——也就是说，您可以拖动垂直线来更改其宽度。问题是，画布的宽度和高度属性必须以像素为单位（设置CSS属性会拉伸图像，而不是加宽图形表面）。我需要通过javascript更改画布属性。我很难同时处理所有这些约束

我尝试使模板面板向左浮动，属性面板向右浮动，但每次都会在画布下方和状态栏上方结束。我还将状态栏设置为

position:fixed

，但它倾向于稍微高于画布。你会怎么做？请记住，我必须能够单独调整窗口或面板的大小（菜单栏和状态栏除外，它们永远不会改变大小）

---

编辑：快速编辑以添加我不能使用JQuery/JQuery UI的内容。这个应用程序是计算机密集型的，所以我不得不把它去掉。无论如何，我的兼容目标是IE9。

我在谷歌上快速搜索了一下如何做到这一点，并找到了一篇带有类似答案的堆栈溢出帖子，下面是提供的提琴，下面是javascript部分：

var i = 0;
   $('#dragbar').mousedown(function(e){

        e.preventDefault();
        $('#mousestatus').html("mousedown" + i++);
        $(document).mousemove(function(e){
          $('#position').html(e.pageX +', '+ e.pageY);
          $('#sidebar').css("width",e.pageX+2);
          $('#main').css("left",e.pageX+2);
       })
       console.log("leaving mouseDown");
    });
   $(document).mouseup(function(e){
       $('#clickevent').html('in another mouseUp event' + i++);
       $(document).unbind('mousemove');
       });

以下是帖子：

fiddle使用jQuery，但不使用jQuery UI

您需要使用宽度百分比，查看响应性设计

---

我希望这能有所帮助

你要找的就是这个？

/*列设置*/
上校{
显示：块；
浮动：左；
利润率：1%01%1.6%；
}
.col:第一个子项{左边距：0；}
/*分组*/
.小组：之前，
.小组：之后{
内容：“；
显示：表格；
}
.小组：之后{
明确：两者皆有；
}
.组{
缩放：1；/*适用于IE 6/7*/
}
/*三格*/
.span_3_of_3{
宽度：100%；
}
.span_2_/u 3{
宽度：66.1%；
}
.span_1_/u 3{
宽度：32.2%；
}
/*以小于480像素的全宽显示*/
@仅介质屏幕和（最大宽度：480px）{
.col{margin:1%01%0%；}
.span_3_of_3、.span_2_of_3、.span_1_of_3{宽度：100%；}
}
模板
帆布
性质

我认为您必须使用Javascript来调整面板的大小，据我所知，IE9中不支持唯一一个CSS属性，

resize

-。感谢关于响应式设计的文章，它看起来很有趣。我会调查的。不过，您链接的fiddle是基于JQuery的，在两列布局中到处使用“id”。在上面加一列会破坏一切，否则我就做错了。没问题。此外，codeschool.com还为响应性设计提供了一个很棒的课程，名为“移动之旅”，你可以通过谷歌搜索“codeschool hallpass”获得2天的免费课程，并接受它，这将是非常值得的！是啊，和花车打架很痛苦。我通过对几个答案中的代码进行修改，成功地做到了这一点，但我想我只是要切换到使用表格——这种行为将更加可预测，我不希望出现列可能位于应用程序下方的“响应式”设计。感谢您向我展示：在clearfix之后，我可能有一天会使用它。我最终在小提琴上工作了这么多，这根本不是一回事，但我最终得到的是：非常好。。。你应该去那里，你可以找到一个简单的方法来得到我不想要的。我正在制作一个桌面风格的应用程序，列不应该出现在画布下面，你也不应该向下滚动。

<style>
/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col { margin: 1% 0 1% 0%;}
    .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}
</style>
    <div class="section group">
                    <div class="col span_1_of_3" style="background-color:red;color:white;text-align:center;">
                    template
                    </div>
                    <div class="col span_1_of_3" style="background-color:blue;color:white;text-align:center;">
                    canvas
                    </div>
                    <div class="col span_1_of_3" style="background-color:gray;color:white;text-align:center;">
                    properties
                    </div>
                </div>