位置H1上的页面，但在它上面的标记

我有一些HTML代码：位置H1上的页面，但在它上面的标记

<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下面？

谢谢。

来源

2012-03-22 michaelmcgurk

你没有办法改变标记？这将在后端处理更容易和更清晰。 – 2012-03-22 20:50:18

你有什么理由不能简单地重新排列你的HTML？ – 2012-03-22 20:50:30

在我的完整版本中，我使用XHTML，为了语义代码的利益，我宁愿维护我的H1> H2> H3> H2等标题结构。 – michaelmcgurk 2012-03-22 20:53:36

好吧，伙计们，这里的解决方案:)

您需要使用它的容器上的头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 +等当前的浏览器。

来源

2012-03-22 21:14:13

非常感谢，斯巴达。我会很快看一看，看看我是如何将它贯彻到我的工作中的。 – michaelmcgurk 2012-03-23 09:11:19

传说中的斯巴达!!!我谢谢你！ – michaelmcgurk 2012-03-25 18:33:44

如果页面的布局是僵硬和固定的，你可以使用绝对定位来做到这一点。在“盒子”下方留出足够的空白区域并绝对放置H1标签。如果“盒子”的高度是可变的，你最终可以把你的H1放在其他文本之上。如果它变得糟糕，你可以使用JavaScript来计算位置并动态地执行。

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

来源

2012-03-22 20:54:09

告诉我这件事。客户请求。我解释说它不能完成（因为盒子的高度会有所不同），但我认为我会由专家在这里运行它:-)他们永远不会轻松。 ...无论如何感谢：-D – michaelmcgurk 2012-03-22 21:02:52

位置H1上的页面，但在它上面的标记

回答

相关问题