6

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

3 列响应式网页布局

为了使其具有响应性，我指定了以 % 为单位的宽度、以像素为单位的最小宽度和float:left. 现在如果我调整页面大小，所有 3 个 DIV（1,2 和 3）首先调整大小，然后第 3 个 DIV 移动到第一个 DIV 下方。如果我调整大小，则第 2 个 DIV 移动到第 1 个下方，第 3 个移动到第 2 个下方。

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

我怎样才能做到这一点？

4

4 回答 4

2

可以使用 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 ）。

于 2013-06-29T18:32:27.607 回答
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
        }
    }
于 2013-06-29T23:05:54.143 回答
0

我非常接近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 查询来处理不同的屏幕尺寸场景。

于 2013-06-29T18:15:50.030 回答
0

尝试这个

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

//html    

<div class="left-col"> some text </div>
<div class="right-col"> some text </div>
<div class="main-col"> some text </div>

于 2013-06-29T17:50:15.997 回答