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

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

我想要一个表给我的网格结构，所以所有的列都是彼此排列在一起，所以3格宽，全部向左漂浮，不会这样做。

这是一个非常长的样本，（仅包括完整性）。需要粘贴到表格单元格底部的部分位于示例的底部，类名称为'should-float-to-bottom'，应保留在顶部的部分归类为'should-stick-到了顶”。

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

来源

2010-08-24 boatcoder

我想试试这个：

<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的上涨或下跌。我认为这可能是“绝对的立场”这是导致问题......所以这个解决方案应该工作，只要你不需要。如果您有任何问题，请告诉我！

来源

2010-08-31 23:02:12 TheLibzter

这么简单，但它的工作原理。谢谢。 – boatcoder 2010-09-01 01:52:50

太棒了，我很高兴解决了这个问题！ :) – TheLibzter 2010-09-08 23:45:48

我敢肯定有一个更优雅的方式来做到这一点，但只是乍一看我可能会尝试在您的反馈意见做DIV嵌套表，并使用垂直对齐属性设置为顶部和底部分别用于内部嵌套表的两行。

来源

2010-08-24 19:08:56 cobaltduck

不错的想法，但内部表大小只有它所包含的数据一样大。所以，它不起作用。将桌子高度设置为100％不起作用。绝对定位应该工作，只是不是，即使是在部件周围的div包装。 – boatcoder 2010-08-25 03:26:39

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

回答

相关问题