Menu
Is there a way in CSS to get elements to behave like the picture on the right? The order of the elements isn't that important, but the tiles need to occupy the space from the bottom-up rather than top-down as the person resizes the page.
NORMAL DESIRED
|---------| |---------|
| A B C D | | I |
| E F G H | | E F G H |
| I | | A B C D |
|---------| |---------|
Sample code:
<html>
<head>
<style>
.container {
margin:10px;
border:1px solid black;
float:left;
}
.tile {
width:100px;
height:100px;
border:1px solid black;
margin:5px;
float:left;
font-size: 50px;
text-align: center;
line-height: 100px;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="container-1" class="container">
<span class="tile">1</span>
<span class="tile">2</span>
<span class="tile">3</span>
<span class="tile">4</span>
<span class="tile">5</span>
<span class="tile">6</span>
<span class="tile">7</span>
<span class="tile">8</span>
<span class="tile">9</span>
</div>
</body>
</html>
698
Think outside the box:
.container, .tile {
transform:rotate(180deg); /* Moz and IE10+ */
-ms-transform:rotate(180deg); /* IE9 */
-webkit-transform:rotate(180deg); /* Opera/Chrome/Safari */
}
Yes, this really works:
.container {
margin:10px;
border:1px solid black;
float:left;
transform:rotate(180deg);
}
.tile {
width:100px;
height:64px;
border:1px solid black;
margin:5px;
float:right;
font-size: 40px;
text-align: center;
line-height: 64px;
vertical-align: middle;
transform:rotate(180deg);
}<div id="container-1" class="container">
<span class="tile">1</span>
<span class="tile">2</span>
<span class="tile">3</span>
<span class="tile">4</span>
<span class="tile">5</span>
<span class="tile">6</span>
<span class="tile">7</span>
<span class="tile">8</span>
<span class="tile">9</span>
</div>First the container is rotated 180deg to get the desired layout, then float:right flips their left/right order, and then the tiles are rotated 180deg again to look as intended.
128
There's another way to do this. You can use CSS3's flex-wrap property to achieve the output you're looking for.
.container{
display: flex;
flex-wrap: wrap-reverse;
}
Example
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
