Fatal编程技术网
  • css/
  • Css 在页面上，H1位于H2下方，但在标记中位于H2上方

Css 在页面上，H1位于H2下方，但在标记中位于H2上方

css

Css 在页面上，H1位于H2下方，但在标记中位于H2上方,css,xhtml,stylesheet,markup,Css,Xhtml,Stylesheet,Markup,我有一些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> <

我有一些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>


css测试
.box{宽度：100%；浮动：左侧；背景：红色}
标题显示在第页的Div下面
这是标题2
正如您在标记中看到的，H1位于DIV之上

但是，我想知道，当用户访问网页时，是否可以将其定位在DIV下面

每次刷新页面时，.box div的高度可能会有所不同（它包含随机文本片段）

无论DIV的高度如何，是否可以将H1放置在页面上DIV的下方

谢谢。

如果页面的布局是固定的，您可以使用绝对定位来完成此操作。在“框”下方留出足够的空白，并绝对定位H1标签。如果“框”的高度是可变的，那么最终可能会将H1放在其他文本的顶部。如果情况如此糟糕，您可以随时使用JavaScript计算位置并动态执行

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

好了，伙计们，解决办法如下：）

您需要在标题上使用
display:table caption
属性，在容器上使用
caption-side:bottom

以下是基本标记：

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

应该可以在ie8+和其他当前浏览器中使用。

您无法更改标记吗？这将更容易和更干净地在后端处理。你有什么理由不能简单地重新排列你的HTML吗？在我的完整版本中，我使用XHTML，为了语义代码的利益，我更喜欢保持我的标题结构H1>H2>H3>H2等等。告诉我吧。客户端请求。我解释说这是不可能做到的（因为盒子的高度会有所不同），但我认为我应该由这里的专家来操作：-）他们从不让它变得容易。。。谢谢你的关注：-谢谢你，斯派达。我将很快了解这一点，并了解如何将其应用到我的工作中。 
h1 { 
    display: table-caption;
}
.wrap {
    display: table;
    caption-side: bottom;
}
.box {
    display: table-row;
}