我有一个固定宽度和高度的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;
}
答案 0 :(得分: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%;
}