Как вы размещаете div в нижней части ячейки таблицы? - PullRequest
Новая
       5

Как вы размещаете div в нижней части ячейки таблицы?

1 голос
/ 24 августа 2010

У меня есть некоторые табличные данные. В последнем столбце у меня есть 2 div, один, который показывает данные голосования, и один, который показывает данные сохранения. Я хотел бы, чтобы первый div прикреплялся к верхней части ячейки таблицы, а второй div - к нижней части ячейки таблицы. Установка ячейки таблицы {postion :lative;}, чтобы я мог использовать {position: absolute;} в 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>

Ответы [ 2 ]

0 голосов
/ 01 сентября 2010

Я бы попробовал это: 

    <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", чтобы переместить делители вверх или вниз.Я думаю, что это могла быть «позиция: абсолютная»;это вызывало проблемы ... так что это решение должно работать до тех пор, пока вам это не нужно.Дайте мне знать, если у вас есть какие-либо вопросы!

0 голосов
/ 24 августа 2010

Я уверен, что есть более элегантный способ сделать это, но на первый взгляд я мог бы попытаться сделать вложенную таблицу в вашем div обратной связи и использовать атрибут вертикального выравнивания, установленный на верх и низ соответственно для двухстроки внутренней вложенной таблицы.

...