1

ここでCSSFloatに関する多くの記事を読みましたが、それでも私の簡単な例を機能させることができません。この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が認識されていることはわかっていますが、2つのリストが並んで表示されるのではなく、重なり合って表示されています。左側の一番上の列（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

ちょっとブラッドアービーはお互いに両方のdivをフロートさせる必要があります、それをチェックしてください... http://jsfiddle.net/mnuVB/

于 2012-04-30T18:52:32.987 に答える