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

Question

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

它基本上应该是这样的(请原谅我粗略的例子):

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

但我遇到的问题是，我似乎无法像在我的粗略示例中那样弄清楚要布置这 3 个 div 的 css。

因为设计应该是 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 个框，然后可以灵活地将边距/ float /等扩展到外部 div。

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

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