Question

我似乎无法解决这个问题，我创建了一个带有几个标题标签的基本页面。这是问题所在：

我的H1标签工作正常它是INSIDE红色容器但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>

Answer 1

您有一个容器div的设定高度。 <h1>创建一个新的块格式化上下文，以便h2出现在它下面，即使它是浮动的。要解决此问题，请将h2 放在 h1之前。

http://jsfiddle.net/YpDzb/

但语义上没有意义。如果您还浮动h1

，也可以保留内容顺序

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

Answer 2

您可以关注此演示：http://jsbin.com/epOHaPa/1 in - 我们为{000}设置了display: 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>

基本的html / css问题？

2 个答案: