2

この問題を解決できないようです。いくつかの見出しタグを持つ基本的なページを作成しました。問題は次のとおりです。

私の H1 タグは正常に動作しています。赤いコンテナの内側にありますが、H2 タグは外側にあるようです????

私が間違っていることを理解できませんか？ヘルプ

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>TEST2</title>
    <meta name="description" content="The HTML5 Herald">
    <meta name="author" content="SitePoint">
    <link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>
    <div id="container" style="width:900px; height:100px; margin:0 auto; border: 2px solid red;">

        <h1>Hello World</h1>

        <h2 style="float:right;">Hello World 2</h2>
    </div>
    <!-- END OF CONTAINER -->

</body>
</html>
4

2 に答える 2

0

このデモに従うことができます: http://jsbin.com/epOHaPa/1display: inline-block -両方の見出しに設定widthし、h1

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>TEST2</title>
    <meta name="description" content="The HTML5 Herald">
    <meta name="author" content="SitePoint">
    <link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>
    <div id="container" style="width:900px; height:100px; margin:0 auto; border: 2px solid red;">

      <h1 style="display:inline-block; width:300px;">Hello World</h1>

      <h2 style="float:right; display:inline-block">Hello World 2</h2>
    </div>
    <!-- END OF CONTAINER -->

</body>
</html>
于 2013-09-04T20:43:09.250 に答える
0

コンテナ div の高さを設定しました。は<h1>新しいブロック フォーマッティング コンテキストを作成するため、h2フロートされていてもその下に が表示されます。これを修正するには、 を のh2 前に置きh1ます。

http://jsfiddle.net/YpDzb/

ただし、意味的には意味がありません。また、フロートすると、コンテンツの順序を維持できますh1

http://jsfiddle.net/YpDzb/1/

于 2013-09-04T20:37:30.340 に答える