html - 相互远离的元素

Question

我有一个网站，我希望它看起来像这样:

但它看起来像这样:

这是我的 html:

<div id="wrap">
  <div class="left"> 
    <div class="leftPoints">
      <b>Supporting Points, text area, etc</b>
    </div>
  </div>

  <div class="right">
    <div class="rightPoints">
      <b>Contesting Points, text area, etc</b>
    </div>
  </div>

  <div id="footer">
       blah blah
  </div>
</div>

这是我的CSS:

#wrap
{
    width: 1000px;
    margin: 0 auto;
}

.left
{
    float: left;
    width: 500px;
}

.leftPoints
{
    float: right;
    text-align: right;
}

.right
{
    float: right;
    width: 500 px;
}

.rightPoints
{
    float: left;
    text-align: left;
}

#footer
{
    clear: both;
    margin: 0 auto;
    text-align:center;
}

我觉得这应该很容易，但我不确定要搜索什么关键字。

Answer 1

将类 .right 更改为向左浮动。这会给你想要的外观。要让它在页面居中，请使用 .main 包装器。