Comment positionnez-vous un div au bas d'une cellule de table?

J'ai quelques données tabulaires. Dans la dernière colonne, j'ai 2 divs, un qui montre les données de vote, et un qui montre les données de sauvegarde. Je voudrais d'abord div pour coller au sommet de la cellule de la table, et la deuxième div au bas de la cellule de la table. Réglage de la cellule de la table {postion: relative;} donc je peux utiliser {position: absolute;} dans les divs n'a aucun effet (surprise, surprise)Comment positionnez-vous un div au bas d'une cellule de table?

Je veux la structure de la grille d'un tableau me donne, donc toutes les colonnes sont alignés les uns au-dessus des autres donc 3 divs de large, tous flottaient à gauche, ne le feront pas.

Voici un très long échantillon (inclus uniquement pour l'exhaustivité). La partie qui doit coller au bas de la cellule du tableau se trouve au bas de l'exemple avec un nom de classe "should-float-to-bottom" et la partie qui doit rester en haut est classée "should-stick-" jusqu'au sommet'.

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

Source

2010-08-24 boatcoder

Je voudrais essayer ceci:

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

qui semblait fonctionner pour moi, juste régler "margin-top" et "margin-bottom" pour déplacer les divs vers le haut ou vers le bas. Je pense que cela a pu être la "position: absolue"; cela causait des problèmes ... donc cette solution devrait fonctionner tant que vous n'en avez pas besoin. Faites moi savoir si vous avez des questions!

Source

2010-08-31 23:02:12 TheLibzter

Si simple et pourtant ça marche. Merci. – boatcoder

Génial, je suis content que cela a résolu le problème! :) – TheLibzter

Je suis sûr qu'il ya une plus élégante façon de le faire, mais juste au premier coup d'œil que je pourrais essayer de faire une table imbriquée dans votre div de rétroaction, et utiliser l'attribut vertical-align mis en haut et en bas respectivement pour les deux lignes de la table imbriquée interne.

Source

2010-08-24 19:08:56 cobaltduck

Bonne idée, mais la taille de la table interne est seulement aussi grande que les données qu'elle contient. Donc, ça ne marche pas. Le réglage de la hauteur de la table à 100% n'a aucun effet. Le positionnement absolu devrait fonctionner, mais ce n'est pas le cas, même avec une enveloppe div autour des pièces. – boatcoder

Comment positionnez-vous un div au bas d'une cellule de table?

Répondre

Questions connexes