CSS - 在容器 div 内使 3 个 div 浮动并居中的问题..（包含代码和粗略图表）

Question

可以这么说，我在将 3 个 div 集中在“容器”内时遇到问题。

它基本上应该看起来像这样（请原谅我的粗略示例）：

    ______________________
   |  ___    ___     ___  |
   | |___|  |___|   |___| |
   |______________________|

但我遇到的问题是，我似乎无法弄清楚CSS来让这3个div像我的粗略示例中那样布局。

因为设计应该是有弹性的，并且可以在不同的分辨率下扩展或收缩，从而在不同的分辨率下呈现大致相同的外观。

目前，div 向左浮动，并且与第一个 div 相比，最后一个 div 和容器之间的间隙更大。我试图让它们全部紧贴在中间...

这是与此相关的代码：

.searchResult {
    padding: 1% 2% 1% 2%;
    margin: 2% 2.5%;
    width: auto;
    height: 200px;
    -webkit-border-radius: 10px 10px;
    -moz-border-radius: 10px / 10px;
    -o-border-radius: 10px / 10px;
    -ms-border-radius: 10px / 10px;
    -khtml-border-radius: 10px / 10px;
    border-radius: 10px 10px 10px 10px;
    border: 2px outset #003399;
    -moz-box-shadow: 5px 5px 5px #666666;
    -webkit-box-shadow: 5px 5px 5px #666666;
    -o-box-shadow: 5px 5px 5px #666666;
    -ms-box-shadow: 5px 5px 5px #666666;
    -khtml-box-shadow: 5px 5px 5px #666666;
    box-shadow: 5px 5px 5px #666666;
}

.bizDesc {
    margin-right: 2%;
    text-align: left;
    float: left;
    width: 35.5%;
    height: 140px;
    padding: 5px 0 0 0;
    -webkit-border-radius: 10px 10px;
    -moz-border-radius: 10px / 10px;
    -o-border-radius: 10px / 10px;
    -ms-border-radius: 10px / 10px;
    -khtml-border-radius: 10px / 10px;
    border-radius: 10px 10px 10px 10px;
    border: 2px outset #003399;
    -moz-box-shadow: 5px 5px 5px #666666;
    -webkit-box-shadow: 5px 5px 5px #666666;
    -o-box-shadow: 5px 5px 5px #666666;
    -ms-box-shadow: 5px 5px 5px #666666;
    -khtml-box-shadow: 5px 5px 5px #666666;
    box-shadow: 5px 5px 5px #666666;
}

.bizAddr {
    margin-right: 2%;
    text-align: left;
    float: left;
    width: 28%;
    height: 140px;
    padding: 5px 0 0 0;
    -webkit-border-radius: 10px 10px;
    -moz-border-radius: 10px / 10px;
    -o-border-radius: 10px / 10px;
    -ms-border-radius: 10px / 10px;
    -khtml-border-radius: 10px / 10px;
    border-radius: 10px 10px 10px 10px;
    border: 2px outset #003399;
    -moz-box-shadow: 5px 5px 5px #666666;
    -webkit-box-shadow: 5px 5px 5px #666666;
    -o-box-shadow: 5px 5px 5px #666666;
    -ms-box-shadow: 5px 5px 5px #666666;
    -khtml-box-shadow: 5px 5px 5px #666666;
    box-shadow: 5px 5px 5px #666666;
}

.bizCont {
    text-align: left;
    float: left;
    width: 28%;
    height: 140px;
    padding: 5px 0 0 0;
    -webkit-border-radius: 10px 10px;
    -moz-border-radius: 10px / 10px;
    -o-border-radius: 10px / 10px;
    -ms-border-radius: 10px / 10px;
    -khtml-border-radius: 10px / 10px;
    border-radius: 10px 10px 10px 10px;
    border: 2px outset #003399;
    -moz-box-shadow: 5px 5px 5px #666666;
    -webkit-box-shadow: 5px 5px 5px #666666;
    -o-box-shadow: 5px 5px 5px #666666;
    -ms-box-shadow: 5px 5px 5px #666666;
    -khtml-box-shadow: 5px 5px 5px #666666;
    box-shadow: 5px 5px 5px #666666;
}

css 的第一位与容器相关，接下来的 3 位与按从左到右的顺序排列的 3 个 div 相关。所以我的例子是这样的：

    ______________________
   | ___    ___     ___   |
   ||___|  |___|   |___|  |
   |______________________|

如果有人愿意提供一些智慧并为我提供一些意见，因为我确信答案很简单，我将不胜感激，谢谢！

Answer 1

我认为在其中添加一个 div 是最简单的...这样，图表中的外部 div 将控制 div 在包含它的容器/标签中的行为方式。您要添加的 div 将围绕 3 个框，然后对外部 div 的边距/浮动等具有灵活性。

假设“searchResult”是外层div，结构如下：

<div class="searchResult">
    <div class="divClassToAdd">
        <div class="bizDesc">...</div>
        <div class="bizAddr">...</div>
        <div class="bizCont">...</div>
    </div>
</div>

Answer 2

这应该可以做到：

HTML

<div id="dialogbox">
  <div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

CSS

#container{
  margin: 0 auto;
}
.box{
  width: 200px; height: 200px;
}

无论你对内部盒子做什么都是无关紧要的，只要容器具有自动边距