Question

我希望main能够和最大的孩子一样高，但是我不知道该如何以相对和绝对的位置来工作。

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

Answer 1

如前所述，flex-direction将允许您颠倒行元素的渲染顺序。

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

如何使父母的位置与绝对最高的孩子一样高？

1 个答案: