Question

我正在建立一个登陆页面，我有一个容器<div>，下面我有一个英雄，而且在这之下，我正在尝试将两个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>

Answer 2

你可能最好将两者漂浮到左边。然后确保你的边距在两个div上都匹配（或者手动将它们设置为0px）。

为什么这两个div不会水平对齐？

2 个答案: