Need div to be populated with images from the bottom up
I'm trying to render a div with a set of small icon images laid out horizontally at the bottom of the div.
When the width of the total line of images is less than that of the containing div there isn't a problem. I'm using code like this:
<div class="main-div" style="position: absolute; width: 700px; height: 600px">
Text text text ...
<div class="icon-tray">
<img src="...">
<img src="...">
...
</div>
</div>
With the CSS for "icon-tray" as follows:
div.icon-tray {
position: absolute;
bottom: 0;
}
The "main-div" container is positioned with a fixed width and height; there's lots of space between the text at the top and the icons at the bottom.
The CSS above puts the "icon-tray" div of images all in a line at the bottom of the main div, which is just what I want.
However I've got a problem when the number of icons won't all fit on just one line. When that happens the rendered main div looks like this:
-------------- |text text text ... | | | |X X X X X X X |X X --------------
The "icon-tray" div lays out the images line by line starting from the TOP; whereas I would like the icons to be seen as 'filling up' the main div from the bottom upwards, like this:
------------- |text text text ..开发者_如何学Python. | | | |X X |X X X X X X X --------------
I don't have a clue as to how I can go about this. How can I get the icons to be laid out from the bottom up?
Thanks for any help!
You can do this all with CSS - though you have to use some of the more non-standard properties. Since you have standardized to Firefox 3 though it shouldn't be a problem.
First you flip each image vertically, and then you flip the entire div vertically.
Also, I removed your bottom: 0px; style for div.icon-tray. There is no need for that with this method.
Here is the code I'm using:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
div.icon-tray {
position: absolute;
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
img {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
</style>
</head>
<body>
<div class="main-div" style= "position: absolute; width: 700px; height: 600px">
Text text text ...
<div class="icon-tray">
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
</div>
</div>
</body>
</html>
Seems a little obscure what you're trying to do.
Is this something you will want to be dynamic? If so, you should use some php to get number of images going to be displayed, divide by how many per row, then take the remainder and spit it out first.. somelike like that anyway.
If it's not going to be dynamic and just straight up html, would be easier to just abs position each image (considering your container div has a set width and height anyway?)
I think you'll have to resort to Javascript for this. I can't imagine any way to do it with CSS right now.
Here's what you could do with jQuery:
$(document).ready(function() {
var total = $('.icon-tray > img').size(),
maxperrow = 7, //edit this to the max. imgs per row
breakafter = total-parseInt(total/maxperrow)*maxperrow;
$('.icon-tray:nth-child('+breakafter+')').css({'clear':'left'});
});
The above is assuming you have your images set to float left.
edit: if you can do it server-side, even better. You can do the same math with PHP (for example) and don't have to rely on Javascript.
If you can use CSS3 (Chrome, IE9, Firefox4 this spring) then you can use:
http://dev.w3.org/csswg/css3-flexbox/
I'd recommend reading:
http://www.html5rocks.com/tutorials/flexbox/quick/
Browsers which don't support CSS3 will still get the top to bottom experience however. You'll have to ask yourself if the time investment in using jQuery to position each icon based on width is worth the trouble to support older browsers.
加载中,请稍侯......
精彩评论