Comment puis-je positionner un élément au bas de son conteneur dans Firefox?

J'ai une cellule de table, et je veux qu'une div à l'intérieur soit toujours dans le coin inférieur gauche. Ce qui suit fonctionne bien dans IE et Safari, mais Firefox positionne le div absolument sur la page, pas dans la cellule (code basé sur la solution solution here). J'ai testé à la fois avec et sans la DTD, qui a mis Firefox en mode Quirks et en mode Standards, et ni travaillé correctement. Je suis coincé - des idées?Comment puis-je positionner un élément au bas de son conteneur dans Firefox?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <title>Test</title> 
     <style type="text/css"> 
     table { width:500px; } 
     th, td { vertical-align: top; border:1px solid black; position:relative; } 
     th { width:100px; } 
     .manage { text-align:right; position:absolute; bottom:0; right:0; } 
     </style> 
    </head> 
    <body > 
    <table> 
     <tr> 
      <th>Some info about the following thing and this is actually going to span a few lines</th> 
      <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td> 
     </tr> 
     <tr> 
      <th>Some info about the following thing and this is actually going to span a few lines</th> 
      <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td> 
     </tr> 
    </table> 
    </body> 
</html>

Source

2008-11-14 Chris Marasti-Georg

Avez-vous trouvé le moyen de le faire? – Alex

@jitbit Je n'ai pas. –

Désolé d'entendre ça ... J'ai finalement fini par ajouter un nouveau "" sans bordure pour contenir le contenu du bas. – Alex

Voir si cela fonctionne pour vous. Je ne suis pas certain de l'exactitude du problème, mais cela a quelque chose à voir avec l'utilisation de td avec un positionnement relatif. J'ai enveloppé la table avec l'étiquette div et positionné cela relativement et il semble faire ce que vous voulez.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <title>Test</title> 
     <style type="text/css"> 
     table { width:500px; } 
     th, td { vertical-align: top; border:1px solid black; } 
     th { width:100px; } 
     div.body {position:relative; width:500px;} 
     .manage { text-align:right; position:absolute; bottom:0; right:0; display:block} 
     </style> 
    </head> 
    <body > 
    <div class="body"><table> 
     <tr> 
       <th>Some info about the following thing and this is actually going to span a few lines</th> 
       <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td> 
     </tr> 
    </table></div> 
    </body> 
</html>

Source

2008-11-14 15:15:31

Malheureusement, celui-ci se casse quand j'ajoute une autre ligne à la table qui a la même apparence. –

position: relative est apparemment pas pris en charge au niveau mondial pour la balise td. Je n'ai malheureusement pas trouvé de sources définitives.

Vous pouvez placer un bloc div dans le td avec la taille souhaitée et y appliquer position: relative à la place.

Source

2008-11-14 15:17:41 Lasar

En essayant cela, je ne peux pas obtenir le div pour remplir le td. –

Cela peut sembler vraiment évident, mais avez-vous essayé d'utiliser vertical-align: bottom; dans .manage?

Source

2008-11-14 15:18:15 Powerlord

Selon le W3C, position: relative n'a pas d'effet sur les cellules de tableau:

« L'effet de 'position: relative' sur table-row-groupe, table-header-groupe, la table -footer-groupe, table-ligne, table-colonne-groupe, table-colonne, table-cellule, et les éléments de légende de table est indéfini. "

La solution consiste à ajouter un div supplémentaire à la cellule du tableau.

EDIT: Cette div nécessite un height:100% et position:relative; pour être défini.

<table> 
    <tr> 
     <td> 
      <div style="position:relative;height:100%;"> 
       Normal inline content. 
       <div class="manage">your absolute-positioned content</div> 
      </div> 
     </td> 
    </tr> 
</table>

Source

2008-11-14 15:20:48

Cela ne le pousse pas vers le bas :( –

exemple de code édité maintenant.J'ai testé cela dans Firefox 3. –

En FF3, cela ne me pousse pas vers le bas pour http: //i36.tinypic. com/znqxpv.jpg –

avoir un DIV à l'intérieur du TD avec une largeur de 100% et une hauteur de 100%, puis régler la position sur: relative.

Source

2008-11-14 15:36:21 jishi

Cela ne marche pas - la div interne n'est pas poussée vers le bas –

À droite, la position: relative n'a aucun effet sur les éléments de table, et Firefox applique cette règle. La solution de la div fonctionne, mais c'est un balisage terrible à mon avis.

Avez-vous absolument besoin d'utiliser une table pour afficher ce contenu? (Ou est-ce relatif?)

Si non, pourquoi n'utilisez-vous pas les éléments div et faites ce que vous voulez?

Pour utiliser les tables pour les problèmes de mise en page est si 1998 ...

Source

2008-11-14 15:36:57 alexmeia

Les données que j'affiche sont Une colonne affiche c ontext pour un commentaire, l'autre colonne affiche le commentaire lui-même. Pourquoi utiliser un élément sans signification sémantique quand un riche sémantiquement est fourni, cela correspond à mon cas? –

Ok, mais une liste de définitions (dl) au lieu d'une table peut aussi être une solution sémantique. – alexmeia

Ce ne sont pas vraiment des définitions. Y at-il un moyen de s'assurer que dt et dd restent à la même hauteur que les changements de contenu? –

Mettez un display:block sur la table et maintenant FF respecte la position: relative.

Source

2010-07-20 15:20:08 Wouter

+1 cela fait que ça marche! – Frankie

Dans FF18, la table ne conserve pas sa largeur et les éléments sont positionnés absolument sur le parent parent de la table (dans ce cas, la fenêtre) –

Comment puis-je positionner un élément au bas de son conteneur dans Firefox?

Répondre

Questions connexes