1

我已经阅读了许多关于 CSS Float 的文章，但仍然无法让我的简单示例正常工作。我正在尝试使用此 html 在我的页面上获取 2 列：

<div id="mainContent" style="clear: both;">
  <div id="categoryColumn" >
    <h1 >
      Recipe Categories
      </h1>
      <ul>
        <li>cat1</li>
        <li>cat2</li>
        <li>cat3</li>
      </ul>
  </div>

  <div id="menuColumn">
    <h1>
      Weekly Menus
    </h1>
      <ul>
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
        <li>menu4</li>
        <li>menu5</li>
      </ul>
  </div>
</div>

这个CSS

#categoryColumn
{
    background-color: yellow;
  width: 500px;
  float: left;
}

#menuColumn
{
    background-color: red;
  width: 500px;

}

我知道 div 被识别是因为颜色是正确的，但是这两个列表出现在彼此之上，而不是并排出现。我想在左边的顶部列（categoryColumn），在右边的底部。我用错了吗？

4

3 回答 3

3

float 也需要放在 menuColumn 上。

于 2012-04-30T18:47:44.670 回答
1

将 float:left 添加到 #menuColumn - 请参阅http://jsfiddle.net/UjLeK/

于 2012-04-30T18:49:28.823 回答
1

嘿 Brad Irby 需要将两个 div 相互浮动，只需检查一下... http://jsfiddle.net/mnuVB/

于 2012-04-30T18:52:32.987 回答