html - 如何创建单列内容优先布局

Question

我有一个带有页眉和页脚的单列固定宽度布局，我必须按照视图顺序使用以下内容。

1. 标题
2. 导航
3. 基本内容
4. 基本内容
5. 主要内容
6. 页脚

项目 3,4 和 5 将是动态的并垂直扩展（高度未知） 项目 1,2 和 6 将是固定高度。我们的 SEO 经理说他希望“主要内容”成为正文中的第一个 div，或者至少在基本内容（源视图）之上。

我尝试将主包装器（围绕所有 6 个 div）设置为相对然后将“主要内容”绝对定位到底部。

Answer 1

嘿，你可以像这样轻松地做到这一点

CSS

div{
    background:green;
    margin-top:10px;
    padding:20px;
    color:white;
}

#five-5{
display:none;
}

HTML

<div id="five"></div>
<div id="one">Header</div>
<div id="two">navigation</div>
<div id="three">basic content</div>
<div id="four">basic content</div>
<div id="six">Footer here </div>





<div id="five-5">Main Container here </div>

JAVA脚本

document.getElementById('five').innerHTML=document.getElementById('five-5').innerHTML;

现场演示http://jsfiddle.net/rohitazad/tk7ky/1/