Question

我使用表格构建了一个使用3列布局的模板（根据给出的建议here）。然后，我将一些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>

有关如何解决此问题的任何想法？这是一个问题site。

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 Layout: 2 column fixed-fluid (again)

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

2 个答案: