如何让父母和地位最高的孩子一样高：绝对亲戚？答案

【问题标题】：How to make parent as high as the highest child with position:absolute&relative?如何让父母和地位最高的孩子一样高：绝对亲戚？
【发布时间】：2020-01-19 11:21:05
【问题描述】：

我希望main 与最大的孩子一样高，但我不知道如何使用 position: relative&absolute 来实现。

HTML

<main>
  <div class="layout-content"></div>
  <aside class="layout-sidebar-first"></aside>
</main>

因为我想把我的aside 放在左边，把.layout-content 放在右边，我有 CSS：

main {
  max-width: 1000px;
  height: 100%;
  position: relative;
}

.layout-sidebar-first {
  width: 25%;
  position: absolute;
  left: 0;
}

.layout-content {
  width: 75%;
  position: absolute;
  right: 0;
}

我正在使用 Drupal，所以我不能在 html 中将 aside 放在 div 之前并使用 display:flex。

我试过main CSS：

height:100% or auto;
box-sizing: border-box;
contain: content;
display:block

【问题讨论】：

我知道你说你不能使用 display:flex 但那是因为你不能改变你的 html 的呈现顺序吗？如果是这样，您可以尝试将 flex-direction: row-reverse 与 display: flex 结合使用。
艾伦，你完全正确！我可以使用 display flex 和 reverse。我让它与它一起工作。谢谢！仍然想知道是否有 position:absolute&relative 的解决方案:)

标签： html css drupal

【解决方案1】：

正如评论的那样，flex-direction 将允许您反转 tath 元素连续呈现的顺序。

main {
  max-width: 1000px;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;
}

.layout-sidebar-first {
  width: 25%;
}

.layout-content {
  width: 75%;
}

作为替代方案，您还可以使用 CSS order 属性来更改单个元素的位置，而无需反转整行的方向。

main {
  max-width: 1000px;
  height: 100%;
  display: flex;
}

.layout-sidebar-first {
  width: 25%;
  order: 2;
}

.layout-content {
  width: 75%;
}

另外值得注意的是，order 可以使用负值。

.layout-sidebar-first {
  width: 25%;
  order: -1;
}

【讨论】：