为什么我的标题强制使用水平滚动条？

Question

考虑以下所需的布局：

+--------------------------------------------------------------+
| +----------+                                                 |
| |          |                                                 |
| |  IMAGE   |                       HEADER TEXT ALIGNED RIGHT |
| |          |                                                 |
| +----------+                                                 |
+--------------------------------------------------------------+

这里，#header div有2个孩子：图像和h1文本。图像需要左对齐，h1文本右对齐。 h1文本应位于#header div：

的垂直中心

<style>
  #header { width: 100%; }
  #header img { float: left; }
  #header h1 { display: block; float: right; }
</style>

<div id="header">
  <img src="logo.gif">
  <h1>HEADER TEXT ALIGNED RIGHT</h1>
</div>

然而，这在浏览器中为我提供了一个水平滚动条。如果我将#header h1宽度定义为例如500px，则水平滚动条会消失。但是，这是因为我想要一个流畅的布局，我不想为任何div定义一个固定的。

我做错了什么？

Answer 1

确保body元素的margin，padding等属性为0.如果要维护这些属性，则应将#header元素的宽度设置为auto或保留``。 这意味着，

#header{width:auto;}