Reputation: 359
I am trying to stack divs vertically using float: left.
But they stack horizontally by default.
Any solution using css?
This is what i want to get:
> +-----+-----+-----+
> | 1 | 6 | 11 |
> +-----+-----+-----+
> | 2 | 7 | 12 |
> +-----+-----+-----+
> | 3 | 8 | 13 |
> +-----+-----+-----+
> | 4 | 9 | 14 |
> +-----+-----+-----+
> | 5 | 10 | 15 |
> +-----+-----+-----+
This is what i get:
> +-----+-----+-----+
> | 1 | 2 | 3 |
> +-----+-----+-----+
> | 4 | 5 | 6 |
> +-----+-----+-----+
> | 7 | 8 | 9 |
> +-----+-----+-----+
> | 10 | 11 | 12 |
> +-----+-----+-----+
> | 13 | 14 | 15 |
> +-----+-----+-----+
An image of the div that I want to rearrange:
Each div contains a number, an image and a name. this is the code for the div:
#championsWrapper {
float: left;
width: 180px;
}
Upvotes: 0
Views: 61
Reputation: 253506
I'd suggest using CSS columns, using column-count
(and the various vendor-prefixes for this property):
#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>
If required you can use the column-rule
property to add vertical lines to visually separate the columns, using the same syntax as the border
property (column-rule-width
column-rule-style
column-rule-color
):
#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>
And, of course, adjust the gutters between the columns, using 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>
References:
Upvotes: 1
Reputation: 8537
You can use columns
like this
#champions {
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
}
Upvotes: 1
Reputation: 3675
Just use display:inline-block
on all of the divs like so.
.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>
Upvotes: 1