CSS-让 100% 宽度的 div 包裹在另一个 [jsfiddle] 下答案

【问题标题】：CSS- Getting 100% width div to wrap under another [jsfiddle]CSS-让 100% 宽度的 div 包裹在另一个 [jsfiddle] 下
【发布时间】：2016-08-01 17:20:09
【问题描述】：

在响应式布局中，我有两列。左栏是侧边栏，右栏是内容。

使用媒体查询，当屏幕宽度很小时，列变为 100% 宽度并相互堆叠。

在这种情况下，我希望侧边栏（第一个 div）出现在内容（第二个 div）下方。

我尝试在小屏幕上使用float: right，一旦它达到 100%，但在 100% 宽度时，浮动显然无关紧要。

.left, .right {
  width: 100%;
  float: left;
  background: green;
}
.left {
  float: right;
  background: red;
}
.half {
  width: 50%;
}
.space {
  width: 100%;
  display: block;
  height: 40px;
}

在页面上：

<div class="left half"> <!-- To mimic full screen size -->
Left
</div>
<div class="right half">
Right
</div>

<div class="space"></div>

<div class="left"> <!-- To mimic small screen size -->
Left
</div>
<div class="right"><!-- This should appear first -->
Right
</div>

这里是小提琴：https://jsfiddle.net/ph09frvw/

我确定这不是第一次有人想将侧边栏包裹在内容下，我只是一直找不到解决方案。

【问题讨论】：

在 Bootstrap stackoverflow.com/questions/20979062/… 中完成的相同操作

标签： css

【解决方案1】：

您可以将display:flex; 属性与flex-direction 结合使用来重新排列您的div。参考：https://css-tricks.com/almanac/properties/f/flex-direction/

【讨论】：

添加一个 jsfiddle 来澄清你的答案

【解决方案2】：

您可以使用display: flex 和order 属性来更改<div> 元素的顺序。虽然浮动对水平对齐很有帮助，但对垂直对齐帮助不大，下面是一个例子：

.flex {
  display: flex;
  flex-flow: row wrap;
}
.left {
  order: 2;
  flex: 1 0 50%;
  background: red;
}
.right {
  order: 1;
  flex: 1 0 50%;
  background: green;
}
.full {
  margin-top: 20px;
}
.full > .left,
.full > .right {
  flex: 1 0 100%;
}

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

<div class="flex full">
  <div class="left">
    Left
  </div>
  <div class="right">
    Right
  </div>
</div>

【讨论】：

【解决方案3】：

记得在 HTML 元素的 class 属性中引用相关的类名。

您的 CSS display:block 应该可以解决问题，否则请尝试以下操作： float: left

当您在div 元素上使用：display:block 时，您无需指定width:100%，因为它应该自动跨越宽度，如果它没有被其他任何东西阻碍。

确保这些元素的position 是“相对的”，否则可能无法按预期工作；可能会在全球范围内声明某些特定标签应显示为“绝对”，这可能会破坏您想要实现的目标。

【讨论】：