css - 在容器 div 中定位固定大小的 div

Question

所以我有一个固定大小的容器 div 和固定大小的 div 进入该容器，但我正在寻找的是一种以某种方式对齐子 div 的方法，如下所示:

在子 div 上使用默认的 display:block 会使它们继续沿着页面向下运行，忽略容器 div 的边界，而使用 display:inline-block 会使它们显示如下:

容器 div 中是否缺少某些东西来阻止子元素溢出，或者我需要添加到子元素中？

谢谢，

注意:图片仅显示 8 个盒子，我打算使用更多。

Answer 1

CSS3 列正是您要寻找的。这是一个示例，HTML:

<div class = "container">
    <div class = "entry">Glee is awesome!<br/>1</div>
    <div class = "entry">Glee is awesome!<br/>2</div>
    <div class = "entry">Glee is awesome!<br/>3</div>
    <div class = "entry">Glee is awesome!<br/>4</div>
    <div class = "entry">Glee is awesome!<br/>5</div>
    <div class = "entry">Glee is awesome!<br/>6</div>
    <div class = "entry">Glee is awesome!<br/>7</div>
    <div class = "entry">Glee is awesome!<br/>8</div>
</div>

CSS:

.container {
    height: 230px; /*2 * 100 + 3 * 10*/
    width: 450px; /*2 * 400 + 5 * 10*/
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4; /*4 columns*/
}
.entry {
    height: 100px;
    width: 100px;
    margin: 10px;
    background-color: rgb(0, 162, 232);
    color: white;
    font-family: 'Arial', Helvetica, Sans-Serif;
    text-align: center;
    font-weight: bold;
}

还有一个小演示:little link .

希望对您有所帮助!