JQuery UI选项卡标题太大，css浮动两列布局

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）内的任何填充或边距也设置为百分比，以便视图根据不同的屏幕尺寸进行调整。

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