在容器div中放置固定大小的div

Question

So I have a fixed size container div, and fixed sized divs to go inside that container, but what I'm looking for is a way to align the children divs in a certain way like this:

Using the default display:block on the children divs causes them to continue running down the page, ignoring the boundaries of the container div, whilst using display:inline-block causes them to display like this:

Is there something i'm missing from the container div to stop the children overflowing, or is it something i'd need to add to the children?

Thanks,

Note: The images show just 8 boxes, I plan to use more.

Answer 1

CSS3 columns are what you're looking for. Here's a sample, 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;
}

And a little demo: little link .

I hope that helped!