html - 如何在其 float 的主 div 之外获取标题并将其全宽放置在页面顶部

Question

我有一个常见的 HTML 结构，它由一个 73% 宽度的 div 组成，它向左浮动，包含几个元素，其中一个是标题。还有一个 23% 宽度的 float 右侧边栏。

<div class="primary">
    <header>
    </header>
</div>

<div class="sidebar">
</div>

是否可以让页眉(嵌套在第一个 div 中)全宽显示在页面顶部，并显示在左侧父 div 下方，右侧显示边栏？

所有这一切，无需更改 HTML 结构并将标题放在其父 div 之外。

基本上，我有这个:

what I have

但我想得到这个:

what I would like

不改变结构。

Answer 1

是的，这是可能的。但解决方案有点老套。如果您有能力更改 html，那将是最好的，但如果没有，请继续:

制作正文，position: relative; 并将标题设置为position:absolute。现在您可以将页眉相对于正文移动到任何位置。

如果您将 margin-top 添加到正文，那么您将有一些空白可以放置标题。将页眉宽度设置为 100%，为您的页眉设定高度以匹配您为正文和 boom 设置的边距量。

还有其他方法可以做到这一点，但这是一种。

body {
  position: relative;
  margin:0;
  margin-top: 50px;
  width: 100%;
}

div.primary {
  width:73%;
  float:left;
  background-color: yellow;
  color:black;
  text-align:center;
  font-size: 2em;
}

div.sidebar{
  float:right;
  width: 23%;
  background-color: red;
  text-align:center;
  font-size: 2em;
}

header {
  box-sizing: border-box;
  width: 100vw;
  top: -50px;
  left: 0;
  background-color: lightblue;
  position: absolute;
  height: 50px;
}

p {
  text-align: center;
}

<div class="primary">
    PRIMARY
    <header>
        HEADER
    </header>
</div>

<div class="sidebar">
    SIDEBAR
</div>