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

您为容器 div 设置了高度。<h1>创建一个新的块格式化上下文，即使它是浮动的，h2它也会出现在它的下方。要解决此问题h2 ，请将h1.

http://jsfiddle.net/YpDzb/

但是，从语义上讲，这没有意义。如果您还浮动h1

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

于 2013-09-04T20:37:30.340 回答
0

您可以关注这个演示： http: //jsbin.com/epOHaPa/1，我们在其中设置display: inline-block了标题和分配widthh1

<!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 回答