Question

我有一些表格数据。在最后一列中，我有2个div，一个显示投票数据，另一个显示保存数据。我想先将div粘贴到表格单元格的顶部，将第二个div粘贴到表格单元格的底部。设置表格单元格{postion：relative;}所以我可以在div中使用{position：absolute;}没有效果（惊讶，惊讶）

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

这是一个很长的样本，（仅为完整性而包含在内）。需要粘贴到表格单元格底部的部分位于示例的底部，类名为“should-float-to-bottom”，应该保留在顶部的部分是“应该粘贴的”到了顶”。

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

Answer 1

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

Answer 2

我会试试这个：

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

这似乎对我有用，只需调整“margin-top”和“margin-bottom”来向上或向下移动div。我认为它可能是“位置：绝对的”;这导致了问题...所以这个解决方案应该工作，只要你不需要它。如果您有任何问题，请告诉我们！

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

2 个答案: