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

…如果立柱高度取决于另一立柱的高度？ 该解决方案至少应适用于IE6、7和Mozilla

HTML表格布局：

+------------------------+----------------------+ | top-aligned paragraph | Here | | | is a | | | very | | | long | | | text | | | that | | | eventually | | | determines | | | the overall | |bottom-aligned paragraph| table height. | +------------------------+----------------------+ +------------------------+----------------------+ |顶部对齐的段落|此处| ||是一个| ||非常| ||长| ||文本| ||那| ||最终| ||决定| ||总体| |底部对齐段落|表格高度| +------------------------+----------------------+

---

最简单的方法应该是只在要对齐的单元格中使用

垂直对齐

顶部和底部：

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

---

复制|粘贴

如果不想使用表，可以执行以下操作：

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

.外部{
位置：相对位置；
背景色：#EEE；
}
.对{
宽度：50%；
左边距：50%；
背景色：#F88；
}
顶部
.底部{
位置：绝对位置；
宽度：50%；
}
.顶{
排名：0；
背景色：#8F8；
}
.底部{
底部：0；
背景色：#88F；
}
这里
是一个非常
长的
文本
，它最终决定了
整个
桌子的高度。
顶部对齐的段落
底部对齐段落

使用rowspan属性（）使长文本（column2）跨越两行。然后将Para1放在第一列第一行（顶部对齐），然后将Para2放在第一列第二行（底部对齐）

---

只是想加上我的5美分。在某些版本的Odoo（例如Odoo 9.0）中，使用“valign”，但使用“vertical align”即可完成此任务。谢谢你的评论

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

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