css - 为什么这两个 div 不能水平对齐？

Question

我正在构建一个登录页面并且我有一个容器 <div>在它下面我有一个英雄，在它下面我试图将 2 个 div 彼此对齐。我似乎无法让它们对齐，我已经尝试了所有方法( float:left 和 float:right )甚至 margin但它不起作用。烦人的是我也需要它在 IE6 中工作(我知道很蹩脚):(

CSS:

.container {
width:960px;
margin:0 auto;
position:relative;


}

#leftbox {
background-image:url(images/left-box.jpg);
float:left;
width:450px;
height:359px;
}

#rightbox {
background-image:url(images/right-box.jpg);
float:right;
width:450px;
height:359px;
}

这是 HTML:

<div class="container">
<img src="images/hero-main.jpg" alt="some text" usemap="#amap"/>
<map name="amap">
  <area shape="rect" coords="788,278,937,332" href="http://www.someurl.co.uk" alt="text"/>
</map>
<div id="boxes">
  <div id="leftbox"> </div>
  <div id="rightbox"> </div>
</div>
</div>

任何想法请给我，因为我有点卡住 :S

Answer 1

要居中，只需在 #boxes 中添加边距即可。

CSS:

#container {
    width:960px;
    margin:0 auto
}
#boxes {
    width:100%;
    margin:0 30px
}
#leftbox, #rightbox {
    width:450px;
    height:359px;
    float:left
}
#leftbox {
    background-image:url(images/left-box.jpg)
}
#rightbox {
    background-image:url(images/right-box.jpg)
}

HTML:

<div id="container">
    <p><img src="images/hero-main.jpg" alt="some text" usemap="#amap" /></p>
    <map name="amap">
        <area shape="rect" coords="788,278,937,332" href="http://www.someurl.co.uk" alt="text" />
    </map>
    <div id="boxes">
        <div id="leftbox"></div>
        <div id="rightbox"></div>
    </div>
</div>