将3个内容框彼此相邻放置

时间:2012-07-24 16:14:46

标签: html css

我有一个名为content的主容器,在该容器中我有3个div。现在我希望它们彼此相邻,如下所示:X X X.在教程中我读到我应该将它们全部浮动到左边。这适用于前2个,但第三个永远不会出现。我确定路径是正确的,因为当我把它作为第二道时它确实出现了。有人可以帮帮我吗?

HTML

<div id="content"
    <div id="about_us"></div>
    <div id="our_services"></div>
    <div id="contact_us"></div>
</div>

CSS

#content {
width: 1200px;
height: 254px;
}

#about_us {
background-image: url(../website/images/about_benshore.png);
width: 307px;
height: 183px;
float: left;
margin-top: 26px;
margin-left: 119px;
}

#our_services {
background-image: url(../website/images/our_services.png);
width: 308px;
height: 184px;
float: left;
margin-top: 26px;
margin-left: 23px;
}

#contact_us {
background-image: url(../website/images/contact_us.png);
width: 307px;
height: 183px;
float: left;
margin-top: 26px;
margin-left: 23px;
}

1 个答案:

答案 0 :(得分:0)

尝试将overflow:auto添加到#content。

同时确保元素的宽度加上各自的边距不超过#content的宽度。