Stacking buttons upwards
I've never seen this before, or if I have I haven't noticed how it was done.
I was wondering if there was a way with HTML and CSS to stack elements up, rather then down as display:inline would do. Pretty much, I want to go against gravity when the stacked elements get to the end of the line.
Ideally, I want to ju开发者_Python百科st use CSS and HTML. Javascript, if needed which I think it might be.
If you flip the container and the children, it will appear like the children is going the opposite gravity.
Here is a sample:
http://jsfiddle.net/WSBLv/
I put a big box and a lot of small box in there. They are all using float: left
to make the elements go from left to right, top to bottom.
Then you flip both the big box and all the small blocks by using CSS transforms:
-moz-transform: scale(-1);
-webkit-transform: scale(-1);
-o-transform: scale(-1);
-ms-transform: scale(-1);
transform: scale(-1);
For Internet Explorer, you can use filters!
filter: FlipH FlipV;
Then it looks like this:
http://jsfiddle.net/NFSMm/
You could use the jQuery insertBefore() function to add elements "on top" of others.
http://api.jquery.com/insertBefore/
Not a very elegant solution, but you could use a spacer <div>
or image fill that initial space, and push everything to the right. as you add or remove elements, you would expand or contract the div to keep it aligned.
精彩评论