Question

我的HTML代码发生了一些有趣的事情，我希望有人可以解释这里发生了什么。

我有一个非常简单的网站，包含容器div，标题div和body div，看起来html元素根本没有对div进行响应（它们不在div中，它们位于div之间html标记）。

想知道为什么它的表现如此。

这是html：

<html>
<head>
<title>Andy</title>

<link rel="stylesheet" href="style-andy.css" type="text/css" media="screen" />

</head>

<body>

<div id='container'>

  <div id='header'>
    <h1>Andy </h1>
  </div>
  <div id='image'>
    <img src='main.jpg' />
  </div>
</div>


</body>
</html>

这是CSS：

html, body
{
  margin:0;
  padding:0;
}

#container
{
  width:1024;
  margin:0 auto;
}

#header
{
  width:1024;
  padding-bottom:10px;
  border:1px solid black;
}
#header h1
{
  float: right;
  display: inline;
  color: black;
  font-family: helvetica, arial;
  font-weight: 100;
}
#image
{
  width:1024;
  height:100;
  border:1px dotted yellow;
}

Answer 1

您的HTML看起来很不错，但是您的CSS缺少px对宽度和高度的衡量标准，并且您的h1标记正在float: right;，这意味着标题div可能已赢得'有一个高度（你需要'清除'标题div）

修改

仅供参考，一个简单的清除方法是在需要清除的内容下放置一个明确类的div，然后使用CSS告诉div清除，例如：

HTML：

<div id="header"> <h1>Andy</h1> <div class="clear"></div> </div>

CSS：

.clear { clear: both; }

还有其他方法，例如：http://www.webtoolkit.info/css-clearfix.html

是什么让这些元素不在某些div中？

1 个答案: