我正在尝试在由 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
最佳答案
您可以通过使用 display:inline-block;
并设置百分比宽度来实现相同的目标。但是,既然我已经编辑了我的答案,请注意使用 float 不需要设置 display:inline-block,但我将保留代码以便可以查看两种方式。
基本上,在这种情况下您唯一需要注意的是确保两个 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;
}
关于带有 css float 两列布局的 JQuery UI 选项卡标题太大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18332420/