浮動小数点数を使用しているときにdivを縦に積み重ねます。

Question

divをfloat：leftを使用して垂直に積み重ねようとしています。

しかし、それらはデフォルトで横に積み重ねられます。

cssを使用しているソリューションはありますか？

これは私がを取得したい何次のとおりです。

> +-----+-----+-----+ 
> | 1 | 6 | 11 | 
> +-----+-----+-----+ 
> | 2 | 7 | 12 | 
> +-----+-----+-----+ 
> | 3 | 8 | 13 | 
> +-----+-----+-----+ 
> | 4 | 9 | 14 | 
> +-----+-----+-----+ 
> | 5 | 10 | 15 | 
> +-----+-----+-----+ 

これは私が得るものです：

> +-----+-----+-----+ 
> | 1 | 2 | 3 | 
> +-----+-----+-----+ 
> | 4 | 5 | 6 | 
> +-----+-----+-----+ 
> | 7 | 8 | 9 | 
> +-----+-----+-----+ 
> | 10 | 11 | 12 | 
> +-----+-----+-----+ 
> | 13 | 14 | 15 | 
> +-----+-----+-----+ 

私は再配置したいのdivの画像：

各divには、数字、画像、名前が含まれています。 これはdivのためのコードです：

#championsWrapper { 
    float: left; 
    width: 180px; 
} 

Answer 1

を使用することができます私は、CSSの列を使用してcolumn-countを使用して（とこのプロパティのさまざまなベンダープレフィックス）をお勧めしたい：

#container { 
 
    -moz-column-count: 3; 
 
    -ms-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count: 3; 
 
} 
 
#container div { 
 
    background-color: #fff; 
 
} 
 
#container div:nth-child(odd) { 
 
    background-color: #ccc; 
 
}

<div id="container"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    <div class="item">6</div> 
 
    <div class="item">7</div> 
 
    <div class="item">8</div> 
 
    <div class="item">9</div> 
 
    <div class="item">10</div> 
 
    <div class="item">11</div> 
 
    <div class="item">12</div> 
 
    <div class="item">13</div> 
 
    <div class="item">14</div> 
 
    <div class="item">15</div> 
 
    <div class="item">16</div> 
 
    <div class="item">17</div> 
 
    <div class="item">18</div> 
 
    <div class="item">19</div> 
 
    <div class="item">20</div> 
 
    <div class="item">21</div> 
 
</div>

必要あなたが視覚的にborder財産（column-rule-widthcolumn-rule-stylecolumn-rule-color）と同じ構文を使用して、列を区切るに垂直線を追加するcolumn-ruleプロパティを使用することができた場合：

#container { 
 
    -moz-column-count: 3; 
 
    -ms-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count: 3; 
 
    -moz-column-rule: 2px solid #999; 
 
    -ms-column-rule: 2px solid #999; 
 
    -webkit-column-rule: 2px solid #999; 
 
    column-rule: 2px solid #999; 
 
} 
 

 
#container div { 
 
    background-color: #fff; 
 
} 
 

 
#container div:nth-child(odd) { 
 
    background-color: #ccc; 
 
}

<div id="container"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    <div class="item">6</div> 
 
    <div class="item">7</div> 
 
    <div class="item">8</div> 
 
    <div class="item">9</div> 
 
    <div class="item">10</div> 
 
    <div class="item">11</div> 
 
    <div class="item">12</div> 
 
    <div class="item">13</div> 
 
    <div class="item">14</div> 
 
    <div class="item">15</div> 
 
    <div class="item">16</div> 
 
    <div class="item">17</div> 
 
    <div class="item">18</div> 
 
    <div class="item">19</div> 
 
    <div class="item">20</div> 
 
    <div class="item">21</div> 
 
</div>

もちろん、列間の溝を調整するには、column-gap：

を使用します

#container { 
 
    -moz-column-count: 3; 
 
    -ms-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count: 3; 
 
    -moz-column-rule: 2px solid #999; 
 
    -ms-column-rule: 2px solid #999; 
 
    -webkit-column-rule: 2px solid #999; 
 
    column-rule: 2px solid #999; 
 
    -moz-column-gap: 3em; 
 
    -ms-column-gap: 3em; 
 
    -webkit-column-gap: 3em; 
 
    column-gap: 3em; 
 
} 
 
#container div { 
 
    background-color: #fff; 
 
} 
 
#container div:nth-child(odd) { 
 
    background-color: #ccc; 
 
}

<div id="container"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    <div class="item">6</div> 
 
    <div class="item">7</div> 
 
    <div class="item">8</div> 
 
    <div class="item">9</div> 
 
    <div class="item">10</div> 
 
    <div class="item">11</div> 
 
    <div class="item">12</div> 
 
    <div class="item">13</div> 
 
    <div class="item">14</div> 
 
    <div class="item">15</div> 
 
    <div class="item">16</div> 
 
    <div class="item">17</div> 
 
    <div class="item">18</div> 
 
    <div class="item">19</div> 
 
    <div class="item">20</div> 
 
    <div class="item">21</div> 
 
</div>

参考文献：

• column-count。
• column-gap。
• column-rule。

Answer 2

ただ、そのようなdiv要素のすべてにdisplay:inline-blockを使用しています。

.champion-wrapper{ 
 
    width:150px; 
 
    display:inline-block; 
 
}

<div class="champion-wrapper">1</div> 
 
<div class="champion-wrapper">2</div> 
 
<div class="champion-wrapper">3</div> 
 
<div class="champion-wrapper">4</div> 
 
<div class="champion-wrapper">5</div> 
 
<div class="champion-wrapper">6</div> 
 
<div class="champion-wrapper">7</div> 
 
<div class="champion-wrapper">8</div> 
 
<div class="champion-wrapper">9</div> 
 
<div class="champion-wrapper">10</div>

Answer 3

あなたはcolumnslike this

#champions { 
    -webkit-columns: 3; 
    -moz-columns: 3; 
    columns: 3; 
}