html - 右浮动内容低于左浮动内容

Question

我有以下 HTML：

<div id="page_title">
  <div id="left_title>
   <h1> MY LARGE TITLE </h1>
  </div>
  <div id="page_help">
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
  </div>
</div>

以及以下 CSS：

#page_title
{
  width:960px;
  margin: 20px auto 0;
  overflow:hidden;
}
#left_title
{
  float:left
}
#page_help
{
  float:right
}

当page_help div 有很多内容时，它在left_title下，这不是我想要的。我希望 left_title 始终位于 page_help 容器的左侧。这张图片显示了（不想要的）行为

这就是我想要的：

为了有这种行为，我错过了什么？

Answer 1

如果您在 div 上设置宽度，那么您将获得所需的行为。问题是 page_help div 试图尽可能多地占用页面宽度。

Answer 2

您需要设置#page_help的宽度，否则它将尝试通过调整自身大小来适应您放入其中的数据量。