Question

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

使用媒体查询时，当屏幕宽度很小时，列会变为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/

我确信这不是第一次有人想在内容中包含侧边栏，我一直无法找到解决方案。

Answer 1

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

Answer 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>

Answer 3

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

你的CSS display:block应该做的伎俩，否则尝试类似： float: left

在display:block元素上使用div时，您无需指定width:100%，因为如果它不受其他任何阻碍，它应自动跨越宽度。< / p>

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

CSS-获得100％宽度div以包裹在另一个[jsfiddle]

3 个答案: