代码之家 › 专栏 › 技术社区 › boatcoder

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

css-position css html

1

boatcoder · 技术社区 · 15 年前

我有一些表格数据。在最后一列中,我有两个div,一个显示投票数据,另一个显示保存数据。我想第一个div粘贴到表单元格的顶部,第二个div粘贴到表单元格的底部。设置表格单元格{position:relative;}以便我可以在div中使用{position:absolute;}没有效果(惊喜,惊喜)

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

这是一个很长的示例(仅用于完整性)。需要粘贴到表单元格底部的部分位于示例的底部,类名为“should float to bottom”,而应保留在顶部的部分被归类为“should stick to 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>

2 回复 | 直到 15 年前

1

0

TheLibzter 15 年前

我想试试这个:

    <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。我认为可能是“位置:绝对”导致了问题……所以只要你不需要,这个解决方案就应该有效。如果你有任何问题,请告诉我!

2

0

cobaltduck 15 年前

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