Поместите H1 ниже H2 на странице, но выше в разметке - PullRequest
Новая
       22

Поместите H1 ниже H2 на странице, но выше в разметке

0 голосов
/ 23 марта 2012

У меня есть HTML-код: 

<html>
<head>
<title>css test</title>
<style type="text/css">
.box{width:100%;float:left;background:red}
</style>
</head>
<body>

<h1>Title To Appear Below Div on Page</h1>

<div class="box">
    <h2>This is a Heading 2</h2>
</div>


</body>
</html>

Как видно из разметки, H1 находится выше DIV.

Однако мне было интересно, можно ли расположить это под DIV, когда пользователь заходит на веб-страницу.

Скорее всего, .box div будет разной высоты при каждом обновлении страницы (содержит произвольные фрагменты текста).

Можно ли разместить H1 под DIV на странице независимо от высоты DIV?

Спасибо.

Ответы [ 2 ]

2 голосов
/ 23 марта 2012

Хорошо, ребята, вот решение:)

Вам необходимо использовать display: table-caption свойство в заголовке и caption-side: bottom в его контейнере.

Вот основная разметка: 

<div class="wrap">
    <h1>header</h1>
    <div class="box">lorem ipsum</div>
</div>​

и CSS: 

h1 { 
    display: table-caption;
}
.wrap {
    display: table;
    caption-side: bottom;
}
.box {
    display: table-row;
}

А вот jsfiddle http://jsfiddle.net/rjtyn/4/

Должно работать в ie8 + и других текущих браузерах.

0 голосов
/ 23 марта 2012

Если макет страницы жесткий и фиксированный, для этого можно использовать абсолютное позиционирование.Оставьте достаточно пустого пространства под «прямоугольником» и разместите тег H1.Если высота «коробки» является переменной, вы можете положить H1 поверх другого текста.Если это плохо, вы всегда можете прибегнуть к JavaScript, чтобы вычислить позицию и сделать это динамически.

Все это похоже на царапину на левом ухе правой рукой.

...