0

したがって、固定サイズのコンテナdivと、そのコンテナ内に配置する固定サイズのdivがありますが、私が探しているのは、次のような特定の方法で子divを整列させる方法です。

divを並べ替える方法

子divでデフォルトのdisplay：blockを使用すると、コンテナdivの境界を無視して、ページを下に移動し続けます。一方、display：inline-blockを使用すると、次のように表示されます。

divがdisplay：inline-blockでどのように表示されるか

子供が溢れるのを防ぐためにコンテナdivに欠けているものはありますか、それとも子供に追加する必要があるものですか？

ありがとう、

注：画像には8つのボックスしか表示されていませんが、もっと使用する予定です。

4

1 に答える 1

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;
}

そして少しのデモ：少しのリンク。

お役に立てば幸いです。

于 2012-08-25T21:43:39.210 に答える