带有 css float 两列布局的 JQuery UI 选项卡标题太大

Question

我正在尝试在由 float: left 提供支持的两列布局的右列中设置 JQuery UI 选项卡。

问题是:选项卡的标题 的大小调整为与左列相同的高度。

HTML:

<div id="zone_content">
    <div id="zone_main">
        <div id="zone_left">
            <p>Stuff</p><p>Stuff</p><p>Stuff</p><p>Stuff</p><p>Stuff</p>
        </div>
        <div id="zone_tabs">
            <ul>
                <li><a href="#tabs-1">Tab 1</a></li>
                <li><a href="#tabs-2">Another Tab</a></li>
            </ul>
            <div id="tabs-1">
                <p>blah blah blah blah</p>
            </div>
            <div id="tabs-2">
                <p>bloh bloh bloh bloh</p>
            </div>
        </div>
    </div>
</div>
<script>
    $(function() {
        $("#zone_tabs").tabs();
    });
</script>

CSS:

#zone_main {
  overflow: auto;
  width: 100%;
}
#zone_left {
  float: left;
  width: 250px;
}
#zone_tabs {
  margin-left: 250px;
}

参见 jsfiddle .

我注意到它可能与 this one 是同一个问题，但是虽然在 #zone_tabs 上添加 float: left; 的答案更正了标题高度，但它也会将选项卡向下推到左列末尾之后。 (当左列足够大时它会这样做:在 jsfiddle 中为 250px；如果在指定的两个位置都将其减小到 100px，则选项卡会找到它们的预期位置。)

那么，谁能帮我解释一下为什么会发生这一切？

版本:Chrome 23 或 Firefox 23、JQuery 1.8.2、JQuery UI 1.9.1

Answer 1

您可以通过使用 display:inline-block; 并设置百分比宽度来实现相同的目标。但是，既然我已经编辑了我的答案，请注意使用 float 不需要设置 display:inline-block，但我将保留代码以便可以查看两种方式。

SEE THIS JSFIDDLE

基本上，在这种情况下您唯一需要注意的是确保两个 div(zone_left 和 zone_tabs)内的任何填充或边距也设置为百分比，以便 View 在不同的屏幕尺寸下进行调整。

#zone_main {
    overflow: auto;
    width: 100%;
}
#zone_left {
    display:inline-block;
    width: 30%;
    float:left;
}
#zone_tabs {
    display:inline-block;
    width:65%;
    float:left;
}