How do you position a div at the bottom of a table cell?_问答_开发者

How do you position a div at the bottom of a table cell?

开发者 https://www.devze.com 2023-01-12 17:59 出处：网络

I have some tabular data. In the last column, I have 2 divs, one that shows the vote-data, and one that shows the save-data. I would like to first div to stick to the top of the table cell, and the second div to the bottom of the table cell. Setting the table cell {postion: relative;} so I can use {position: absolute;} in the divs has no effect (surprise, surprise)

I want the grid structure a table gives me, so all the columns are lined up above each other so 3 divs wide, all floated left, won't do that.

Here is a very long sample, (included only for completeness). The part that needs to stick to the bottom of the table cell is at the bottom of the example with a class name of 'should-float-to-bottom' and the part that should stay at the top is classed 'should-stick-to-the-top'.

<html>
    <head>
        <style type="text/css" media="screen">
   .feedback { position: relative;  width:100px; height=100%}
   .should-float-to-bottom, .should-stick-to-the-top{ position: absolute; right: 0; background: #ccc; }
            .should-stick-to-the-top { top: 0;}
   .should-float-to-bottom{ bottom: 0; }
            .dark {background-color: #ddd;}
            form {margin: 0px;}
  </style>
    </head>
    <body>
        <table width='50%'>
            <tr class="dark">
                <td class="meta">
                    Some Stuff in Here with varying widths
开发者_如何转开发                </td>
                <td class="bookmark-object">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </td>
                <td>
                    <div class='feedback'>
                        <div class="should-stick-to-the-top">
                            <div class="vote-data">
                                <form method="POST" action="/bookmarks/vote/" rel="vote">
                                    <span class="score upscore">1</span> SpriteBtns <span class="score dnscore">0</span>
                                </form>
                            </div>
                            <div class="show-voters">
                                <a href="/profiles/voters/bookmark/7">See&nbsp;Who&nbsp;Voted</a>
                            </div>
                        </div>
                        <div class="should-float-to-bottom">
                            Saved&nbsp;once
                            <br>
                            (including&nbsp;you)
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>

I would try this:

    <head>
        <style type="text/css" media="screen">
   .feedback {position: relative; width:100px;}
   .should-float-to-bottom, .should-stick-to-the-top {background: #ccc; }

   .should-stick-to-the-top { margin-bottom:30px;}

   .should-float-to-bottom{margin-top:30px}
            .dark {background-color: #ddd;}
            form {margin: 10px;}
  </style>
    </head>

That seemed to work for me, just adjust "margin-top" and "margin-bottom" to move the divs up or down. I think it may have been the "position: absolute;" that was causing problems...so this solution should work as long as you dont need that. Let me know if you have any questions!

I'm sure there is a more elegant way to do this, but just at first glance I might try doing a nested table in your feedback div, and use the vertical-align attribute set to top and bottom respectively for the two rows of the inner nested table.