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

Posted 2023-03-05

【中文标题】CSS - 在容器 div 中让 3 个 div 浮动和居中的问题 ..（包含代码和粗图）

【英文标题】：CSS - Problems with getting 3 div's to be floated and centered, within the container div.. (contains code and crude diagram)

【发布时间】：2012-01-10 23:49:46

【问题描述】：

可以说，我在将“容器”内的 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 相关。所以我的例子是这样的：

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

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

【参考方案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>

【讨论】：

没问题。正如@Dbugger 在他的编辑中提到的那样，将“divClassToAdd”的边距设置为自动将为您提供所需的内容。玩转风格，看看什么最适合。 :)

【参考方案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;

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

【讨论】：

感谢您的意见，但这不适合我。

应该的。你能做一个jsdiffle吗？需要明确的是，#container 与对话框不同。是一个额外的块，使对话框中的块居中。