位置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上的頁面，但在它上面的標記

回答

相關問題