CSS 布局：2 列固定流体（再次）

Question

我正在尝试设置一个 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" : "#" } 
                    } 
                }
            ]
        }, 
    });
});

我遇到的问题是，当我展开树（左侧）时，右侧的选项卡开始变得奇怪。包含选项卡的区域（我认为是元素）垂直增长。

看一下这里的示例：http://jsfiddle.net/codecraig/gBUw2/

Answer 1

约西亚说得对，但更好的解决方案是改变清晰修复技术的性质。 .ui-helper-clearfix 这样做：

.ui-helper-clearfix::after {
    clear: both;
    content: '.';
    display: block;
    height: 0px;
    visibility: hidden;
}

问题是 clear:both。您可以通过以下方式获得所需的清除，而不会丢失全角块显示：

#right .ui-helper-clearfix {
    clear: none;
    overflow: hidden;
}

将 clear:both clear-fix 替换为 overflow:hidden代码> 清除修复。

Answer 2

小部件选项卡标题有一个明确的修复。 更新了小提琴。您可以使用非浮动布局来修复此问题，或者像这样覆盖 css：

#right .ui-helper-clearfix { display: inline-block; }

这使得标头不会扩展容器的整个宽度。

Answer 3

您需要做的就是简单地调整您的 css，如下所示：

#left {
    float: left;
    width: 23%;
    overflow: auto;
}

#right {
    float: left;
    width: 75%;
    display: block;
}

这也可以解决选项卡容器不扩展整个宽度的问题。尽管您可以将 #right 的宽度百分比调整为您喜欢的任何值。