How do I get a div to float to the bottom of its container?

 

This question already has an answer here:

  • How can I position my div at the bottom of its container? 21 answers

    • Set the parent div to position: relative , then the inner div to... 

    position: absolute; 
bottom: 0;

    ...and there you go :)

    A way to make it work is the following:

  • Float your elements left like normal

  • Rotate the parent div 180 degrees using 

    -moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

    JSfiddle: http://jsfiddle.net/wcneY/

  • Now rotate all the elements that float left (give them a class) 180 degrees to put them straight again. Voila! they float to the bottom.

    • After struggling with various techniques for a couple of days I have to say that this appears to be impossible. Even using javascript (which I don't want to do) it doesn't seem possible.

    To clarify for those who may not have understood - this is what I am looking for: in publishing it is quite common to layout an inset (picture, table, figure, etc.) so that its bottom lines up with the bottom of the last line of text of a block (or page) with text flowing around the inset in a natural manner above and to the right or left depending on which side of the page the inset is on. In html/css it is trivial to use the float style to line up the top of an inset with the top of a block but to my surprise it appears impossible to line up the bottom of the text and inset despite it being a common layout task.

    I guess I'll have to revisit the design goals for this item unless anyone has a last minute suggestion.

    链接地址: http://www.djcxy.com/p/36510.html

    上一篇: 把一个div变成一个链接

    下一篇: 我如何让一个div浮到它的容器底部？