0

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

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

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

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

所有这一切，无需更改 HTML 结构并将标头获取到其父 div 之外。

基本上，我有我所拥有的，但我想在不改变结构的情况下得到我想要的。

谢谢

4

1 回答 1

0

对的，这是可能的。但解决方案有点hacky。如果您有能力更改 html，那将是最好的，但如果没有，您可以：

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

如果您将 margin-top 添加到正文，那么您将有一些空白区域可以放置您的标题。将标题宽度设置为 100%，给标题设置一个高度以匹配您给正文的边距量，然后繁荣。

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

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>

于 2018-09-21T21:15:49.127 回答