Comment aligner verticalement une colonne de table en haut et en bas?

Question

..si la hauteur des colonnes dépend de la hauteur d'une autre colonne? La solution devrait fonctionner sur IE6,7 et Mozilla au moins.

HTML mise en page de table:

 
+------------------------+----------------------+ 
| top-aligned paragraph |  Here    | 
|      |  is a    | 
|      |  very    | 
|      |  long    | 
|      |  text    | 
|      |  that    | 
|      |  eventually  | 
|      |  determines  | 
|      |  the overall  | 
|bottom-aligned paragraph|  table height. | 
+------------------------+----------------------+ 

Answer 1

La meilleure façon devrait être de simplement utiliser vertical-align haut et en bas dans les cellules que vous souhaitez aligner:

<table> 
<tr> 
<td class="top"> 
<p>Top aligned paragraph</p> 
</td> 
<td rowspan="2"> 
<p>Lorem ipsum dolor sit amet consectetuer id egestas condimentum neque elit. Non tortor tempus orci quis condimentum interdum dictum pede Duis enim. Sociis sollicitudin Nulla lacinia risus id sit odio pellentesque Vestibulum et. Ipsum pretium vestibulum et lobortis mauris semper In In id faucibus. Est Integer Curabitur dui Quisque eu habitasse Curabitur gravida vel semper. A libero vel nisl.</p> 
</td> 
</tr> 
<tr> 
<td class="bottom"> 
<p>Bottom aligned paragraph</p> 
</td> 
</tr> 
</table> 

puis le CSS:

.top{ 
vertical-align:top; 
} 
.bottom{ 
vertical-align:bottom; 
} 

Copier | Coller

Answer 2

Si vous ne souhaitez pas utiliser les tables, vous pourriez faire quelque chose comme ceci:

<style type="text/css" media="screen"> 
    .outer { 
     position: relative; 
     background-color: #EEE; 
    } 
    .right { 
     width: 50%; 
     margin-left: 50%; 
     background-color: #F88; 
    } 
    .top, 
    .bottom { 
     position: absolute; 
     width: 50%; 
    } 
    .top { 
     top: 0; 
     background-color: #8F8; 
    } 
    .bottom { 
     bottom: 0; 
     background-color: #88F; 
    } 
</style> 

<div class="outer"> 
    <div class="right">Here<br>is a<br>very<br>long<br>text<br>that<br>eventually<br>determines<br>the overall<br>table height.</div> 
    <div class="top">top-aligned paragraph</div> 
    <div class="bottom">bottom-aligned paragraph</div> 
</div> 

Answer 3

Utilisez l'attribut rowspan (http://www.htmlcodetutorial.com/tables/index_famsupp_30.html) pour rendre le texte long (colonne2) période de deux lignes. Placez ensuite le Para1 dans la première colonne de la première rangée (aligner le haut), puis le Para2 dans la première colonne de la deuxième rangée (aligner le bas).

-------------------------------------- 
|Para 1 Align Top |This is your very |     
|     |long text. This | 
|     |is your very long | 
|_________________|text.    | 
|     |This is your very | 
|     |long text. This | 
|     |is your very long | 
|Para2 align bottm|Text.    | 
--------------------------------------