我正在尝试设置一个 2 列布局,其中左侧区域是固定的,主要内容是流动的。我在这里看到了几个答案,它们往往有效。但是,当我在“左侧”区域使用“jsTree”并在主/内容区域使用 jQuery UI 选项卡时,会出现一些奇怪的行为。
html
<div id="main">
<div id="left">
<div id="tree">
</div>
</div>
<div id="right">
<ul>
<li><a href="#a">A</a></li>
<li><a href="#b">B</a></li>
<li><a href="#c">C</a></li>
</ul>
<div id="a">
<h3>A is here</h3>
</div>
<div id="b">
<h3>B is here</h3>
</div>
<div id="c">
<h3>C is here</h3>
</div>
</div>
</div>
CSS
#left {
float: left;
width: 200px;
overflow: auto;
}
#right {
margin: 0 0 0 200px;
}
javascript
$(document).ready(function() {
$('#right').tabs();
$('#tree').jstree({
"plugins" : [ "json_data", "themes"],
"json_data" : {
"data" : [
{
"data" : "A node",
"children" : [ "Child 1", "Child 2" ]
},
{
"attr" : { "id" : "li.node.id" },
"data" : {
"title" : "Long format demo",
"attr" : { "href" : "#" }
}
}
]
},
});
});
我遇到的问题是,当我伸展树(Splay Tree)(左侧)时,右侧的选项卡开始变得奇怪。包含选项卡的区域(我认为是元素)垂直增长。
看一下这里的示例:http://jsfiddle.net/codecraig/gBUw2/
最佳答案
约西亚说得对,但更好的解决方案是改变清除修复技术的性质。 .ui-helper-clearfix
执行以下操作:
.ui-helper-clearfix::after {
clear: both;
content: '.';
display: block;
height: 0px;
visibility: hidden;
}
问题在于clear:both
。您可以通过以下方式获得所需的清理,而不会丢失全 Angular block 显示:
#right .ui-helper-clearfix {
clear: none;
overflow: hidden;
}
这将 clear:both
clear-fix 替换为 overflow:hidden
clear-fix。
关于jquery - CSS布局: 2 column fixed-fluid (again),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5516743/