0

我只是想知道我是否有这样的布局

<div class="container">
<div class="left"> Left </div>
<div class="right"> Right </div>
</div>

将视口更改为 320 需要首先出现右 div 并在其下方出现左 div，这可能吗？？？？？？

4

2 回答 2

0

是的。只需在相关媒体查询上使用 flex-box 设置，如下所示，这些框将反转显示。

<html><head></head><body><div class="container" style="
    display: -webkit-flex;
">
  <div class="left" style="
    -webkit-flex-flow: column;
    background: lightgray;
"> Left </div>
  <div class="right" style="
    -webkit-flex-flow: column;
    background: yellow;
    -webkit-order: -1;
"> Right </div>
</div> 
</body></html>

原始来源：https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

于 2013-08-09T05:20:44.520 回答
-1

它是可能的并且被广泛使用。看看这种移动优先的方法：

<div class="container">
<div class="right"> Right </div>
<div class="left"> Left </div>
</div>

这将在移动设备上呈现在另一个框下方。现在我们使用 CSS 在更大的屏幕（320 像素以上）上重新排列它们：

@media only screen and (min-width : 481px) {
  .left { float: left; }
  .right { float: right; }
}
于 2013-08-09T05:19:20.247 回答