css - 更好的 html 结构，用于将标题和侧边栏放在左侧栏中

Question

在此site我有一个具有这种 HTML 结构的 wordpress 主题:

<header>
    <nav> ... </nav>
</header>

<div class="post-content"> ... </div>

header {
float:left;
with:30%;
}

.post-content {
float:right;
with:30%;
}

我想将小部件添加到左列。

我的选择是:

1) 使标题可小部件化:小部件将出现在内容之前，这对 seo 不利。

2) 将页眉和侧边栏放在一个包装器中:相同，内容之前的小部件

我的问题是:将 header 放在其他 div 中是一种 html 不良做法吗？并将标题放在 html 中的内容之后？这样做的最佳结构是什么？

Answer 1

我认为对您来说最有效的解决方案是将 header 放置在 position: absolute 位置。为此，您需要固定高度的标题元素。

<div class="wrapper">
    <header>

    </header>

    <div class="sidebar">

    </div>

    <div class="post-content">

    </div>
</div>

CSS:

header{
    position: absolute;
    width: 300px; /* give your desired width */
    height: 200px; /*give your desired height */
    top: 0;
    left: 0;
}

.sidebar{
    width:30%;
    float: left;
    padding-top: 200px /* this is the header height */
}
.post-content{
    width:70%;
    float: right;

}

当然，在 HTML 中，您可以将后置内容放在侧边栏之前，这也可以。