html - 将 3 个内容框并排放置

Question

我有一个名为 content 的主容器，在该容器中我有 3 个 div。现在我希望它们像这样彼此对齐:X X X。在教程中我读到我应该将它们全部 float 到左边。这适用于前两个，但第三个从未出现。我确定路径是正确的，因为当我把它放在第二位时它确实出现了。有人可以帮助我吗？

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;
}

Answer 1

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

还要确保元素的宽度加上它们各自的边距之和不会超过#content 的宽度。