Question

我有一个固定宽度和高度的div并且连续显示。问题出现在我试图让它响应的时候。我需要divs在彼此之下连续堆叠。

我做了一个小提琴http://jsfiddle.net/h657t6r2/1/所以你可以看到。如果您使用内容窗口的宽度，您将看到块堆栈，但第4个堆栈在第2个堆栈下面，因为它是中心对齐的。我希望它是中心对齐的，因为如果没有它，它会在右侧留下很大的间隙，看起来并不好看。与https://www.behance.net上类似的堆叠，除了他们从来没有像我这样的剩余块的情况。

我需要的是当屏幕变小并堆叠时，第四个块整齐地堆叠在第一个块下面。

仅供参考：块数是动态的，并不总是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

根据我的评论

由于您的块无论如何都是固定宽度，您可以将course_list居中并使其内部的块保持对齐。为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;
    }
}

正如你所看到的，为简单起见我只有一个断点。你可以根据需要加入。另请注意，我删除了块的关闭/打开标记之间的空间，以避免使用显示内联块时的额外空间

OR

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

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

设置居中容器的％宽度，让块自然落下

.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%;
}

中心块/ div水平并允许它们内嵌堆叠

1 个答案: