响应式网页设计方案

Question

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

为了使其响应，我指定宽度为％，最小宽度（以像素为单位）和float:left。现在如果我调整页面大小，所有3个DIV（1,2和3）首先调整大小，然后第3个DIV移动到第1个DIV以下。如果我调整更多，那么第二个DIV移动到第一个和第三个以下的第二个移动到第二个。

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

我该怎么做？

Answer 1

可以使用Flexbox重新排序。但是，您需要1个媒体查询。

http://codepen.io/cimmanon/pen/fwqed

body {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

div {
  -webkit-flex: 1 1 20em;
  -ms-flex: 1 1 20em;
  flex: 1 1 20em;
}

@media (max-width: 40em) {
  .a, .c {
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
}
.a {
  background: orange;
}

.b {
  background: yellow;
}

.c {
  background: grey;
}

也可以通过相对定位来重新排序（参见：https://stackoverflow.com/questions/16307621/reordering-elements-at-specific-browser-widths）。

Answer 2

抱歉，我有些错过了一些关于它应该如何更早看的细节，这是另一个解决方案，带有一些简单的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
        }
    }

Answer 3

试试这个

//css
.left-col{float:left;width:33%}
.right-col{float:right;width:33%}
.main-col{margin: 0 33%}

.left-col{float:left;width:33%}

.right-col{float:right;width:33%}

Answer 4

我非常接近2,3,1。看看：http://jsfiddle.net/3QFaa/

新的HTML标记

<div id="superwrap">
<div id="muahaha">
    <div id="col2">2</div>
    <div id="col3">3</div>
</div>
<div id="col1">1</div>

<强> CSS

#superwrap { position: relative; width: 100%; background-color: orange; min-width: 200px;}
#muahaha {top: 0px; width:66.66%; float: right; min-width: 200px; }
#muahaha:after {
  content: "";
  display: table;
  clear: both;}

#col2, #col3 { float: left;}

#col1 { background-color: cyan; width: 33.33%; min-width: 200px;}
#col2 {background-color: yellow; width: 50%; min-width: 200px;}
#col3 { background-color: green; width: 50%; min-width: 200px;}

谢谢@sebastianG的小提琴。

唯一的问题是，正如您所注意到的那样，col1在击中#superwrap的最右边缘之前不会掉落

另一个近乎完美的版本：

如果col1不必立即居中： http://jsfiddle.net/XDTEW/

将float: left添加到col1

我还认为，对于不同的屏幕尺寸场景，你会更好地使用@media查询。