html - 水平居中 block /div 并允许它们内联堆叠

Question

我有固定宽度和高度并显示在一行中的 div。当我试图让它响应时，问题就来了。我需要 div 在彼此下方连续堆叠。

我做了一个 fiddle http://jsfiddle.net/h657t6r2/1/所以你可以看到。如果您调整内容窗口的宽度，您会看到 block 堆叠，但第 4 个然后堆叠在第 2 个下方，因为它是居中对齐的。我希望它居中对齐，因为没有它它会在右侧留下很大的空隙并且看起来不太好。与 https://www.behance.net 上类似的堆叠，除了他们从来没有像我这样有剩余 block 的情况。

我需要的是当屏幕变小并且它们堆叠时，第 4 个 block 整齐地堆叠在第一个 block 的下面。

仅供引用: block 的数量是动态的，并不总是 4。

<div class="content">
    <div class="course_list">
        <div class="box coursebox">

        </div>
        <div class="box coursebox">

        </div>
        <div class="box coursebox">

        </div>
        <div class="box coursebox">

        </div>
    </div>
</div>

.coursebox{
border: green 1px solid;
  padding:10px;
  width: 90px;
  height: 90px;
  margin: 0 20px 20px 20px;
  display: inline-block;
}
.content{
    text-align: center;
}
.course_list{
    display: inline-block;
}

Answer 1

根据我的意见

由于您的 block 无论如何都是固定宽度的，因此您可以将 course_list 居中并使其中的 block 左对齐。在不同的断点(媒体查询)处给 course_list 一个宽度，以使每行具有理想的框数。这是一个跨浏览器的解决方案

这是您所拥有的简化版本的示例

http://jsfiddle.net/h657t6r2/2/

.coursebox{
    border: green 1px solid;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    margin: 0 20px 20px 20px;
    display: inline-block;
}
.course_list{
    margin: 0 auto;
    width: 560px;
}

@media (max-width: 559px) {
    .course_list{
        margin: 0 auto;  
        width: 280px;
    }
}

如您所见，为简单起见，我只有一个断点。您可以根据需要放入任意数量的东西。另请注意，我去掉了 block 的结束/开始标记之间的空间，以避免在使用显示内联 block 时出现额外空间

或

你可以有更简单的东西，比如

http://jsfiddle.net/h657t6r2/3/

为居中容器设置一个百分比宽度，让方 block 自然落下

.coursebox{
      border: green 1px solid;
      box-sizing: border-box;
      width: 100px;
      height: 100px;
      margin: 0 20px 20px 20px;
      display: inline-block;
}
.content{

}
.course_list{
    margin: 0 auto;
    width: 80%;
}