Html 如何垂直对齐顶部和底部的表格列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/453105/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertically align a table column both top and bottom?
提问by
..if the columns height is dependent on the height of another column? Solution should work on IE6,7 and Mozilla at least.
..如果列高度取决于另一列的高度？解决方案应该至少适用于 IE6,7 和 Mozilla。
HTML table layout:
HTML表格布局：
+------------------------+----------------------+ | top-aligned paragraph | Here | | | is a | | | very | | | long | | | text | | | that | | | eventually | | | determines | | | the overall | |bottom-aligned paragraph| table height. | +------------------------+----------------------+
回答by Jayx
The easiest way should be to just use vertical-aligntop and bottom in the cells that you wish to align:
最简单的方法应该是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>
and then the CSS:
然后是 CSS：
.top{
vertical-align:top;
}
.bottom{
vertical-align:bottom;
}
Copy|Paste away
复制|粘贴
回答by Drell
Use the rowspan attribute (http://www.htmlcodetutorial.com/tables/index_famsupp_30.html) to make the long text (column2) span two rows. Then put the Para1 in the first column first row (align top), then Para2 in the first column second row (align bottom).
使用 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. |
--------------------------------------
回答by Gumbo
If you don't want to use tables, you could do something like this:
如果你不想使用表格，你可以这样做：
<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>
