在此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 中的内容之后?这样做的最佳结构是什么?
最佳答案
我认为对您来说最有效的解决方案是将 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 中,您可以将后置内容放在侧边栏之前,这也可以。
关于css - 更好的 html 结构,用于将标题和侧边栏放在左侧栏中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21379983/