html - 将可变宽度网格居中，同时将其元素左对齐

Question

考虑以下问题

<div class="container">
     <div class="grid">
         <div class="unit"></div>
         <div class="unit"></div>
         <div class="unit"></div>
         <div class="unit"></div>
         <div class="unit"></div>
         <div class="unit"></div>
          ....
      </div>
</div>

使用图像，基本上我有这样的东西

如您所见，绿色 block 和容器向左对齐

我想要实现的是这样的。

.unit 元素具有恒定宽度

.grid 元素应随宽度扩展(以便更多的 unit 元素适合 1 行)，同时始终在 .container 中居中>.

任何线索如何仅使用 CSS(如果需要，可能还有一些 html 包装器)实现这一目标？

Answer 1

首先让我说这是一个有趣的问题，我的第一个想法是 flexbox 是解决这个问题的方法。我已经尝试过各种 flexbox 安排，但这种解决方案让我望而却步。因此，下面是使用 float 查询、清除查询和媒体查询的解决方案。

对于此示例，我假设每行至少有 3 个且不超过 9 个框。但是，您可以扩展此解决方案以处理 1 到 9 个以上的盒子。

这是 HTML:

<div class="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

这是一个 CSS，它 (1) 执行一个小型重置以消除浏览器应用的可能会干扰大小调整的填充和边距，以及 (2) 格式化 .grid 及其 div children :

* {
    margin: 0;
    padding: 0;
}

.grid {
    display: table;
    outline: 1px solid blue;
    min-width: 330px;
    margin: 0 auto;
}

.grid > div {
    width: 100px;
    height: 61px;
    margin: 5px;
    background-color: teal;
    float: left;
}

.container block 已被删除，因为 .grid 显示为表格。后者是一个围绕其子项收缩包裹的 block ，可以应用 margin: 0 auto 使其在页面上居中。 .grid 的 min-width 为 330px，确保每行至少可以容纳三个 block 。每当在 table 元素内发生 float 时，它的边距都不会折叠，因此不需要显式清除 float (例如，通过 clearfix)。

每个 .grid div 子级占用 110px 的水平空间(100px 宽度 + 10px 左右边距)。这个数字对于下面的媒体查询代码很重要:

@media screen and (min-width: 330px) and (max-width: 439px) {
    .grid > div:nth-of-type(3n + 1) {
        clear: left;
    }
}

@media screen and (min-width: 440px) and (max-width: 549px) {
    .grid > div:nth-of-type(4n + 1) {
        clear: left;
    }
}

@media screen and (min-width: 550px) and (max-width: 659px) {
    .grid > div:nth-of-type(5n + 1) {
        clear: left;
    }
}

@media screen and (min-width: 660px) and (max-width: 769px) {
    .grid > div:nth-of-type(6n + 1) {
        clear: left;
    }
}

@media screen and (min-width: 770px) and (max-width: 879px) {
    .grid > div:nth-of-type(7n + 1) {
        clear: left;
    }
}

@media screen and (min-width: 880px) and (max-width: 989px) {
    .grid > div:nth-of-type(8n + 1) {
        clear: left;
    }
}

@media screen and (min-width: 990px) {
    .grid > div:nth-of-type(9n + 1) {
        clear: left;
    }    
}

代码背后的基本原理是这样的:如果有足够的空间每行只包含 n 个 block ，那么每第 (n + 1) 个 block 的左边缘都会被清除，这会将 block 移动到新的一行。

还有，这是一个 fiddle :http://jsfiddle.net/5hWXw/ .调整预览窗口的大小以查看调整。