表格中的 jQuery UI 选项卡偏移其他单元格中的内容？

Question

我已经使用表格使用 3 列布局构建了一个模板（根据给出的建议 此处）。然后，我将一些 jQuery UI 选项卡放入其中一个单元格中。但是，其他单元格中的内容似乎被选项卡标题偏移了。我对正在发生的事情感到非常困惑，并且无法使用 Firebug 追溯到此偏移量的来源或如何移动其他单元格中内容的垂直位置。

        <table>
            <tr>
                <td id="left" class="ui-content-widget ui-corner-all">
                    <p>Left</p>
                </td>
                <td id="middle" class="ui-content-widget ui-corner-all">
                    <p>Lorem ipsum... </p>
                </td>
                <td id="right" class="ui-content-widget ui-corner-all">
                    <ul>
                            <li> <a href="#Tabs-Tab1">Tab1</a></li>
                            <li> <a href="#Tabs-Tab2">Tab2</a></li>
                    </ul>
                    <div id="Tabs-Tab1">
                        <p>Nunc volutpat ... </p>
                    </div>
                    <div id="Tabs-Tab2">
                        <p>Lorem ipsum ... </p>
                    </div>
                </td>
            </tr>
        </table>

关于如何解决这个问题有什么想法吗？这是一个存在此问题的网站。

Answer 1

在 resets.css 中，您可以将垂直对齐设置为“顶部”而不是“基线”

vertical-align: top;

Answer 2

您真正的问题是：

.ui-helper-clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

特别是 clear:both;。尝试更改clearfix技术：

#right .ui-helper-clearfix {
    clear: none;
    overflow: hidden;
}

这个问题开始看起来很像这样：CSS布局：2列固定流体（再次）< /a>