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

时间:2012-08-25 21:10:10

标签: css html positioning

所以我有一个固定大小的容器div,固定大小的div进入容器内部,但我正在寻找的方法是以某种方式对齐子div:

How i'd like the divs to sort

使用默认显示:子div上的块会导致它们继续向下运行页面,忽略容器div的边界,同时使用display:inline-block导致它们显示如下:

How divs display with display:inline-block

容器div中是否有一些东西可以阻止孩子们溢出,或者是否需要添加给孩子?

谢谢,

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

1 个答案:

答案 0 :(得分: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

我希望有所帮助!