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

Question

所以我有一個固定大小的容器div，並且固定大小的div放入容器中，但是我正在尋找的方法是以某種方式對齊子div ：

使用默認顯示：對孩子的div塊導致他們繼續向下運行的頁面，忽略了容器div的邊界，而使用顯示：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。

我希望有幫助！