ポジションページ上のH2以下H1が、マークアップ

で、その上、私はいくつかのHTMLコードを持っている：ポジションページ上のH2以下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の高さにかかわらず、ページ上のDIVの下にH1を置くことは可能ですか？

ありがとうございます。

出典

2012-03-22 michaelmcgurk

マークアップを変更する方法はありませんか？これは、バックエンドで処理する方がはるかに簡単でクリーンです。 –

HTMLを並べ替えることができない理由はありますか？ –

私のフルバージョンではXHTMLを使用していますが、セマンティックコードのために、私はH1> H2> H3> H2などのヘッディング構造を維持したいと考えています。 – michaelmcgurk

[OK]を、みんなは、ここでの解決策です:)

あなたは、そのコンテナのヘッダとcaption-side: bottomにdisplay: table-captionプロパティを使用する必要があります。

<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; 
}

そして、ここではhttp://jsfiddle.net/rjtyn/4/

は、IE8 +およびその他の現在のブラウザで動作するはずですjsfiddleです。

出典

2012-03-22 21:14:13

多くのありがとう、Spadar。私はこれをすぐに見て、それを私の仕事にどのように組み込むかを見ていきます。 – michaelmcgurk

伝説のスパダー！ありがとうございます！ – michaelmcgurk

ページのレイアウトが固定で固定されている場合は、絶対配置を使用してこれを行うことができます。十分な空白を "ボックス"の下に置き、絶対にH1タグを配置します。 "box"の高さが可変であれば、他のテキストの上にH1を置くことになります。それが悪い場合は、常にJavaScriptを使用して位置を計算し、動的に行うことができます。

これはあなたの右手で左耳を掻くようなものです。

出典

2012-03-22 20:54:09

教えてください。クライアント要求。私はそれができないことを説明した（箱の高さが変わるので）しかし、私は専門家によってここを実行すると思った:-)彼らはそれを簡単にしません。 ...とにかく見てくれてありがとう:-D – michaelmcgurk

ポジションページ上のH2以下H1が、マークアップ

答えて

関連する問題