如何创建单列内容优先布局答案

【问题标题】：how to create a single column content-first layout如何创建单列内容优先布局
【发布时间】：2012-04-11 12:55:31
【问题描述】：

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

标题
导航
基本内容
基本内容
主要内容
页脚

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

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

【问题讨论】：

@jacktheripper：很明显，他希望他的主要内容在 HTML 中排在第一位，但在查看页面时以（列表的）正确顺序显示。
当然，但他需要上一堂提问的课。实际上，在那个问题中，他说“给我 codez”，而他的问题应该是“使用 CSS 在页面上重新定位内容”
真的看不到代码就忍不住了。我不明白为什么人们想在 SEO 上走得那么远。 html内容出现多远是否重要？我不认为 CSS 是用来做这件事的语言。 Javascript 似乎更合适。
我想我实际上只是按照 SEO 人员想要的任何顺序放置这些内容，并在页面加载后使用 JavaScript 来移动内容。用 CSS 做这件事将是一场噩梦。用 JS 做这件事也很丑陋，但是，嘿，绝望的时候，绝望的措施......
position:absolute 内 position:relative 是您的工具。

标签： html css

【解决方案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/

【讨论】：