html - 使用 css 响应式重新定位 div

<分区>

我正在尝试这样设置我的页面布局:

桌面 View :

|---------------|--------|
| block 1       | block2 |
|               |        |
|               |--------|
|               | block3 |
|               |        |

移动 View :

|---------------|
| block 2       |
|---------------|
| block 1       |
|               |
|               |
|---------------|     
| block 3       |
|---------------|

目前我可以使用 flex-wrap flex-direction 和 block 的宽度来定位 block 1 和 2。

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.block1 {
  width: 66%;
}

.block2 {
  width: 33%;
}

@media (max-width: 580px) {
  .block1, .block2 { width: 100%; }
  .container { flex-direction: column-reverse; }
}

<div class="container">
  <div class="block1">Block 1</div>
  <div class="block2">Block 2</div>
</div>

如何定位第3 block ？

最佳答案

你可以这样做:

body {margin: 0}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100vh; /* height needs to be defined otherwise not possible with flex */
}

.block1 {background: khaki}
.block2 {background: lightgreen}
.block3 {background: lightblue}

.block1 {flex-basis: 100%; width: 66.66%}
.block2, .block3 {flex: 1; width: 33.33%}

@media (max-width: 580px) {
  .container > * {width: initial}
  .block1 {flex: 2} /* makes it twice as "tall" */
  .block2 {order: -1} /* placed above .block1; it's 0 by default */
}

<div class="container">
  <div class="block1">Block 1</div>
  <div class="block2">Block 2</div>
  <div class="block3">Block 3</div>
</div>

关于html - 使用 css 响应式重新定位 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50290827/

上一篇：html - block 级盒子是否封装在线路盒子中？

下一篇：javascript - 无法弄清楚如何在 block 之间添加一点空间

相关文章：

javascript - 在 Javascript 中更改光标类型

javascript - 如何在表格行之间显示元素？

html - Flexbox:重新排序和堆叠列

html - 当我减小窗口大小时，Flex-wrap 没有换行

html - 使用 flex 将 div 移向右侧

javascript - 在 Wordpress 中使用 Visual Composer；原始 js 未应用于我的原始 html

html - 如何让 robots.txt 在 "?"字符之后阻止访问网站上的 URL，但索引页面本身？

javascript - 在 HTML5 音频播放器中搜索不一致

html - 特殊成型盒边框

javascript - 如何突出显示从 URL 检索到的日历上的特定日期？