html - 中心 x float 量 : left divs horizontally

Question

基本上，我想要一个由大小相同的 div(例如 100x100)和类似 200x100 的变体构建的页面。它们都 float :向左调整以相应地调整窗口大小。问题是，我不知道如何让它们在那种情况下居中，有时说连续 3 次或有时连续 7 次，因为通常你会在右边有更多空间使其看起来偏离中心。 提前致谢!

Answer 1

Are you looking for something like this?在容器上设置自动边距将使其水平居中。从那里，您可以 float 或内联您的 block ，以便以您说话的方式显示它们。看一下 CSS 和 HTML:

<div class="container">
    <div></div>
    <div class="variant"></div>
    <div></div>
    <div></div>
    ...
</div>

这个 HTML 在语义上非常简单。理想情况下，我通常会以无序列表的形式执行此操作，但由于您的标题在标题中提到了 divs，所以我朝那个方向发展。

div.container div{
    border: solid 2px black;
    min-height: 100px;
    width: 100px;
    display: inline-block;
    background-color: white;
    vertical-align: top;
    margin: 10px;
}
div.container div.variant{
    width: 200px;
}
div.container{
    margin: auto;
    max-width: 620px;
    background-color: #ecefec;
    padding: 10px;
    font-size: 0;
}

JS Fiddle

这是怎么回事

我们通过属性 display: inline-block 内联 block 元素；因此，我们需要制定一些额外的规则，以便在它们具有不同高度的情况下正确显示它们(与 float 元素不同，它们会自动清除一行)。

内联元素的属性 vertical-align:top 确保它的排列使得元素的上边框与其兄弟元素的上边框齐平。

属性 font-size:0 确保标记空白不被计算在 block 元素之间的间距中(否则一个 div 标签结束到另一个 div 标签开始之间的每个空间都是包括)。

这应该可以实现您想要实现的目标。

更新

在查看您对另一个问题的评论后，我们需要将 text-align:center; 添加到容器 div 的 CSS，因为这将使容器中的每一行居中。

Example