Question

我已经阅读了很多关于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）和右边的底部列。我使用浮动错了吗？

Answer 1

float也需要放在menuColumn上。

Answer 2

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

Answer 3

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

CSS 2列页面，浮动不起作用

3 个答案: