当前位置:  开发笔记 > 前端 > 正文

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

如何解决《如何垂直对齐顶部和底部的表格列?》经验,为你挑选了1个好方法。

..如果列高度取决于另一列的高度?解决方案至少应该适用于IE6,7和Mozilla.

HTML表格布局:

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

Jayx.. 9

最简单的方法应该是vertical-align在您想要对齐的单元格中使用顶部和底部:

Top aligned paragraph

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.

Bottom aligned paragraph

然后是CSS:

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

复制|粘贴



1> Jayx..:

最简单的方法应该是vertical-align在您想要对齐的单元格中使用顶部和底部:

Top aligned paragraph

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.

Bottom aligned paragraph

然后是CSS:

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

复制|粘贴

推荐阅读
路人甲
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有