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>

使用图像，基本上我拥有的是这样的

enter image description here

如您所见，绿色块和容器对齐左侧

我想要实现的是这样的。

enter image description here

.unit元素具有恒定宽度

.grid元素应该随宽度扩展（以便更多unit元素适合1行），同时始终位于.container内。

任何线索如何使用CSS（如果需要可能还有一些html包装器）来实现它？

Answer 1

首先让我说这是一个有趣的问题，我首先想到的是Flexbox是解决这个问题的方法。我已经尝试过各种各样的弹性箱安排，但这种解决方案让我望而却步。因此，下面是使用浮动，清算和媒体查询的解决方案。

对于这个例子，我假设每行至少有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子项：

* {
    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块已被删除，因为.grid显示为表格。后者是一个围绕其子项收缩的块，margin: 0 auto可以应用于将其置于页面中心。 330px的.grid min-width确保每行至少可以容纳三个块。每当浮动发生在table元素内时，其边距不会崩溃，因此不需要明确清除浮点数（例如，通过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个块，则每个第（n + 1）个块的左边缘被清除，这会将块移动到一个新的行。

而且，这是一个小提琴：http://jsfiddle.net/5hWXw/。调整预览窗口的大小以查看调整。

Answer 2

在CSS中，请确保： 1.在.grid规则中，text-align设置为center 2.在.unit规则中，display设置为inline-block。 div元素是块级元素，因此每个新元素都显示在一个新行上。赋予display属性inline-block的值会强制所有div与类unit显示在同一行（直到没有更多空格）。此外，text-align : center不能处理显示属性设置为block的元素，默认情况下，块级元素的显示值为block。

Answer 3

你必须像这样给你的课程赋予价值，

.grid { text-align:center; }

.unit { display:inline-block; }

我希望这能解决你的问题。

如果没有，请通过Jsfiddle显示完整的代码。

Answer 4

@ DRD的答案很好，但需要大量的媒体查询。如果以下漂浮你的船：当它很简单时，不要看太远：在你的容器上设置一个左边/右边的填充物......

.grid {
  padding: 0 5%;
}

当宽度不是.unit整个框（填充，边距，边框，宽度）的倍数时，您会注意到空格不均匀。设置基于％的宽度可以在这里提供帮助。

有关测试用例，请参阅this fiddle。我添加了一小部分Javascript来动态调整填充，删除它以查看仅CSS结果。 编辑： @DRD创建了一个jQuery函数，它比我的JS工作得更好，看到它here（如果你想使用它，不要忘记包含jQuery）。

Answer 5

似乎这个解决方案类似于此处Flex-box: Align last row to grid

的解决方案

首先将.grid设置为inline，然后添加更多div height: 0就可以了。额外div的数量应该至少等于{{1的max-number在1行（减1）。

这有点失禁，但仍然比定义多个units更容易，因为@DRD建议，并且不需要javascript / window.resize（）处理

@media

我仍然希望只使用css

来获得更好的解决方案

将可变宽度网格对齐，同时将其元素对齐到左侧

5 个答案: