CSS - 在容器 div 内使 3 个 div float 并居中的问题..(包含代码和粗略图表)

Question

我在将“容器”内的 3 个 div 居中时遇到问题。

它基本上应该看起来像这样(请原谅我的粗略示例):

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

我遇到的问题是，我似乎无法弄清楚CSS来让这3个div按照我的粗略示例进行布局。

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

目前，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 的边距/ float 等具有灵活性。

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

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