使用表结构和CSS创建网页

Question

我尝试为我的页面创建一个3列页面结构。每列具有不同的独立内容。 我经常遇到的是我需要分别在每一列中定位每个元素。

当另一列中的内容发生变化时，按钮或div等一个元素的位置会发生变化。 我的代码中有任何错误吗？我想我的代码中缺少一些标准规则。

请参阅演示1 here。

此处左右列的内容应保留在列顶部，但不会。为什么呢？

中间栏的内容发生变化后，也会影响左右列元素的位置。为什么呢？

Demo 2 After content in middle column changes

我如何编码以使内容与其他列中的更改无关？

Answer 1

要使内容保持最佳状态，只需在css中添加：

td{vertical-align:top;}

http://codepen.io/anon/pen/mueEJ

Answer 2

要实现您的目标，请尝试添加此css代码：

td { vertical-align:top; }

您可以将值top更改为bottom（如果您希望内容位于表格底部），middle和许多其他值。您可以阅读有关不同选项here的更多信息。