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顶部和底部：

<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

如果您不想使用表格，可以这样做：

<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

使用rowspan属性（http://www.htmlcodetutorial.com/tables/index_famsupp_30.html）使长文本（column2）跨越两行。然后将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.             |
--------------------------------------

如何垂直对齐顶部和底部的表格列？

3 个答案: