layout

Question

如果是，怎么可能显示后者编码在顶部而不通过pure CSS进行绝对定位（没有js和ie6这样的古浏览器） none 我的关注点）？

我需要3个主要部分

菜单（在顶部可见但编码在左或左&右之后）
左边（首先编码（最上面）因为这是我的文章 html 存在的地方）
对（次要的东西）

抱歉，我无法尝试任何事情，因为我不知道如何存在无绝对定位解决方案（如果存在的话）。

有人会说"what is wrong with abs positioning?"腹肌定位没什么问题，但我就是想学

谢谢，最诚挚的问候

Answer 1

如果您的目标浏览器支持，您可以使用 Flexbox 轻松更改元素的顺序 http://caniuse.com/#search=flexbox:

.container {
  display: flex;
  /* Flexbox defaults to a row layout, so we set it to column so the .content and .menu elements stack. */
  flex-direction: column;
}

.content {
  display: flex;
  /* Distribute elements inside .content with respect to their space between the elements */
  justify-content: space-between;
}

.menu {
  /* Forces the elements ordering to the top */
  order: -1;
  width: 100%;
  height: 80px;
  background: #dedede;
}

.left,
.right {
  width: 100px;
  height: 300px;
  background: #aeaeae;
}

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

layout - 在没有绝对定位的情况下在顶部显示后者编码的 div

layout - show the latter coded div at top without absolute positioning

css

positioning