1

我正在尝试在由float: left.

问题是：选项卡标题的大小与左列的高度相同。

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。

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

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

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

4

1 回答 1

1

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

看到这个 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;
}
于 2013-08-20T14:17:34.663 回答