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;
}

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

1 个答案: