制作可调整大小的三列布局的最简洁方法是什么？

Question

对不起，如果标题不是描述性的，但我正在使用 HTML5 画布在 JavaScript 中开发基于 Web 的应用程序。我希望页面调整到窗口大小，但我也希望列可以调整大小 - 也就是说，您可以拖动垂直线来更改它们的宽度。问题是，画布的宽度和高度属性必须以像素为单位（设置 CSS 属性会拉伸图像而不是加宽绘图表面）。我需要通过 javascript 更改画布属性。我很难同时处理所有这些限制。

我尝试让模板面板向左浮动，属性面板向右浮动，但每次都会出现在画布下方和状态栏上方。我还将状态栏设置为position:fixed，但它往往会稍微超出画布。你会怎么做？请记住，我必须能够单独调整窗口或面板的大小（菜单栏和状态栏除外，它们永远不会改变大小）。

编辑：快速编辑添加我不能使用 JQuery / JQuery-UI。该应用程序是计算机密集型的，所以我不得不摆脱它。反正我的兼容性目标是 IE9。

Answer 1

我在谷歌上快速搜索了如何做到这一点，并找到了一个类似答案的堆栈溢出帖子，这是提供的小提琴，这是 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');
       });

http://jsfiddle.net/gaby/Bek9L/

这是帖子：

Emulating frame-resize behavior with divs using jQuery without using jQuery UI?

fiddle 使用了 jQuery，但没有使用 jQuery UI，

你需要使用百分比来表示宽度，看看响应式设计。

http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

希望对你有帮助

Answer 2

你要找的是这个吗？ fiddle link

<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>