时间戳

首页 > 解决方案 > 如何使父母与位置最高的孩子一样高：绝对和相对？

html - 如何使父母与位置最高的孩子一样高：绝对和相对？

问题描述

我想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，所以我不能aside在divhtml 中使用 display:flex。

我试过mainCSS：

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

标签： htmlcssdrupal

解决方案

正如所评论的，flex-direction将允许您颠倒 tath 元素连续呈现的顺序。

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

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

.layout-content {
  width: 75%;
}

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

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;
}

推荐阅读