Question

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

Disposition example

我尝试使模板面板向左浮动，属性面板向右浮动，但它最终位于画布下方和状态栏上方。我还将状态栏设置为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?

小提琴使用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>

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

2 个答案: