如何使用blueprint css垂直排序行（或div）？

Question

我有以下HTML代码（按给定顺序）

<div id="content">...</div>
<div id="footer">...</div>
<div id="header">...</div>

当然，我想在顶部显示标题部分，然后是内容部分，然后是页脚。如何使用蓝图使用CSS代码？

P.S。 ：内容部分首先编写为更加SEO友好

编辑：解决方案应该以div部分的任何顺序工作。例如，div“content”可以在div“footer”之后的XHTML文件中写入...但是我仍然希望页脚显示在内容下面（根据内容，其高度未知）

Answer 1

我不知道蓝图是否提供此功能。但它可以在简单的CSS中轻松完成。

我假设标题的高度是固定的，比如100px。

#header {
    height:100px;
    position: absolute;
    top: 0px;
}

#content{
    padding-top:100px;
}

更新

刚发现两个类似的问题：

• CSS layout, use CSS to reorder DIVs
• CSS positioning div above another div when not in that order in the HTML

它们与我的答案基本相同（div的高度已知）或使用JS重新排序。

Answer 2

你应该能够在任何div上使用绝对定位和阻止，将它们放在页面上的任何位置。

例如，取代码：

<div id="foo"></div>
<div id="bar"></div>

使条形图显示在foo上方，如果foo为100px，请使用以下命令：

#bar{
   top:100px;
   left:0px;
   position:absolute;
   display:block;
}