Question

我有一些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都会有不同的高度（它包含随机文本片段）。

无论DIV的高度如何，都可以将H1置于DIV下方吗？

谢谢。

Answer 1

好的，伙计们，这是解决方案：）

您需要在标题上使用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 +和其他当前浏览器中工作。

Answer 2

如果页面布局严格且固定，您可以使用绝对定位来执行此操作。在“盒子”下方留下足够的空白区域并绝对定位H1标签。如果“box”的高度是可变的，那么最终可能会将H1放在其他文本的顶部。如果它变得那么糟糕，你总是可以使用JavaScript来计算位置并动态地进行。

这一切就像是用右手抓你的左耳。

将H1定位在页面上的H2下方，但在标记上方位于其上方

2 个答案: