Как упорядочить строки (или div) по вертикали с помощью blueprint css?

У меня есть следующий html-код (в указанном порядке)

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

И, конечно же, я хочу отображать часть заголовка вверху, за которой следует часть содержимого, а затем нижний колонтитул. Как я могу сделать это с помощью кода CSS, используя blueprint?

P.S. : Контентная часть написана в первую очередь, чтобы быть более удобной для SEO.

РЕДАКТИРОВАТЬ: решение должно работать в любом порядке, в котором написаны разделы div. Например, «содержимое» div может быть записано в файл XHTML ПОСЛЕ «нижнего колонтитула» div ... но я все же хочу, чтобы нижний колонтитул отображался под содержимым (высота которого неизвестна, поскольку в зависимости от содержимого)


css xhtml blueprint-css
person fabien7474    schedule 02.11.2009    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я не знаю, предоставляет ли blueprint эту функцию. Но это легко сделать с помощью простого CSS.

Я предполагаю, что высота заголовка фиксированная, скажем, 100 пикселей.

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

#content{
    padding-top:100px;
}

Обновлять:

Только что нашел два похожих вопроса:

Они в основном такие же, как мой ответ (известны верхние высоты div) или используйте JS, чтобы изменить их порядок.

person Andy Li    schedule 02.11.2009
comment
Привет, Энди. См. Мое edit = ›Ваше решение не работает, если, например, div содержимого написан ниже div нижнего колонтитула. - person fabien7474; 02.11.2009
comment
Могу ли я узнать, почему порядок блоков div может быть непоследовательным на страницах одного сайта? Более того, вы примете решение JS? - person Andy Li; 02.11.2009
comment
Ссылки, которые вы дали, - это именно то, что я искал. Однако я удивлен, что этого нельзя достичь без JS ... до CSS 3 (см. Ссылку w3.org/TR/2003/WD-css3-content-20030514/#move-to) - person fabien7474; 03.11.2009

arrow_upward
0
arrow_downward

вы должны иметь возможность использовать абсолютное позиционирование и блокировать любой div, чтобы разместить их где угодно на странице.

например, возьмите код:

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

чтобы панель отображалась над foo, если foo равно 100px, используйте следующее:

#bar{
   top:100px;
   left:0px;
   position:absolute;
   display:block;
}
person Jesse    schedule 03.11.2009