响应式网页设计方案

Question

我正在设计如下所示的3列网页布局.

为了使其响应,我指定宽度为%,最小宽度(以像素为单位)float:left.现在如果我调整页面大小,所有3个DIV(1,2和3)首先调整大小,然后第3个DIV移动到第1个DIV以下.如果我调整更多,那么第二个DIV移动到低于第1和第3移动到低于第2.

这是因为浮动属性.但我想以这样的方式修改它,即应该先移动第三个DIV(因为它已经存在),然后应该移动第一个DIV而不是第二个DIV.第二个DIV必须在顶部.

我怎样才能做到这一点？

Answer 1

抱歉，我错过了一些关于它应该如何显示的细节，这是另一个带有一些简单 jQuery/javascript 的解决方案：

http://jsfiddle.net/jzxww/4/

此解决方案将第 1 列移动到底部而不是中间。

这是分解的代码

function resizeHandlr(){
        trigger = $("#superwrap").width(); // get width of wrapper
        $("#supersize").html("superwrap size: " + trigger + "px");
        if (trigger > 600){  
            // if greater than 600px, make all widths 33.33% so they are responsive;     
        } else if ( (trigger < 600) && (trigger > 400)){
            // if between 600 and 400px, make top columns 50% and bottom one 100%
            // move column1 back to top of wrapper (if coming from < 400px)
        } else if (trigger < 400) {
            // if wrapper is less than 400px, make all widths 100%
            // also MOVE column 1 to the bottom of wrapper
        }
    }