将div标签重新排列在另一个之内

Question

我想重新排列彼此之间的div标签（如下所示）。我怎么能这样做？

<div class="wrap">
    <div class="box">
        This has less height
    </div>
    <div class="box">
        This has more height
    </div>
    <div class="box">
        This has less height.
    </div>
</div>

Answer 1

你如何重新安排它们？

浮动和溢出

你可以float向左或向右：

.box:nth-child(1) {
  float: right;
}

.box:nth-child(2) {
  float: left;
}

.box:nth-child(3) {
  overflow: hidden;
}

演示：http://jsfiddle.net/ggtsw

不适用于任何组合，因为最后一个需要是溢出的。

使用flexbox

使用新的flexbox布局非常简单，因为它具有order属性：

.wrap {
  display: flex;
}

.box:nth-child(1) {
  order: 3;
}

.box:nth-child(2) {
  order: 1;
}

.box:nth-child(3) {
  order: 2;
}

很简单。查看此演示：http://jsfiddle.net/keLP9

Compatibility with browsers

Flexbox at the W3C site