Как вертикально выровнять столбец таблицы сверху и снизу?

Question

.. если высота столбцов зависит от высоты другого столбца? Решение должно работать как минимум на IE6,7 и Mozilla.

Макет таблицы HTML:

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

Answer 1

Самый простой способ - использовать vertical-align top и bottom в ячейках, которые вы хотите выровнять:

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

, а затем CSS:

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

Копировать | Вставить

Answer 2

Используйте атрибут rowspan (http://www.htmlcodetutorial.com/tables/index_famsupp_30.html), чтобы длинный текст (столбец 2) занимал две строки. Затем поместите Para1 в первую строку первого столбца (выравнивание по верху), затем Para2 во второй строке первого столбца ( выровнять снизу).

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

Answer 3

Если вы не хотите использовать таблицы, вы можете сделать что-то вроде этого:

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