Html 如何在表格单元格的底部放置div？_Html_Css_Css Position

Html 如何在表格单元格的底部放置div？

html css

Html 如何在表格单元格的底部放置div？,html,css,css-position,Html,Css,Css Position,我有一些表格数据。在最后一列中，我有两个div，一个显示投票数据，另一个显示保存数据。我希望第一个div粘贴到表格单元格的顶部，第二个div粘贴到表格单元格的底部。设置表单元格{position:relative；}以便我可以在divs中使用{position:absolute；}没有任何效果我想要一个表格给我的网格结构，所以所有的列都排列在彼此的上方，所以3个div宽，都向左浮动，不会这样做这是一个很长的示例，仅用于完整性。需要粘贴到表格单元格底部的部分位于示例底部，类名为“应浮动到底部”

我有一些表格数据。在最后一列中，我有两个div，一个显示投票数据，另一个显示保存数据。我希望第一个div粘贴到表格单元格的顶部，第二个div粘贴到表格单元格的底部。设置表单元格{position:relative；}以便我可以在divs中使用{position:absolute；}没有任何效果

我想要一个表格给我的网格结构，所以所有的列都排列在彼此的上方，所以3个div宽，都向左浮动，不会这样做

这是一个很长的示例，仅用于完整性。需要粘贴到表格单元格底部的部分位于示例底部，类名为“应浮动到底部”，而应保持在顶部的部分被归类为“应粘贴到顶部”

<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>

我相信有一种更优雅的方法可以做到这一点，但乍一看，我可能会尝试在反馈div中创建一个嵌套表，并对内部嵌套表的两行分别使用设置为top和bottom的vertical align属性。

我会尝试以下方法：

    <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>

这似乎对我有效，只需调整保证金顶部和保证金底部，以向上或向下移动div。我想可能是这样的：绝对的；这导致了问题……所以只要你不需要，这个解决方案就应该有效。如果你有任何问题，请告诉我

好主意，但是内部表的大小只与它包含的数据一样大。所以，它不起作用。将工作台高度设置为100%无效。即使零件周围有一个div包装器，绝对定位也应该能工作，只是不能。