CSS布局：2列固定流体（再次） [英] CSS Layout: 2 column fixed-fluid (again)

问题描述

我正在尝试设置一个2列布局，其中左侧区域是固定的，主要内容是流畅的。我在这里看到了几个答案，这些答案往往有效。但是，当我在left区域使用jsTree和主/内容区域中的jQuery UI选项卡时，会出现一些奇怪的行为。

I'm trying to setup a 2-column layout where the left area is fixed and the main content is fluid. I've seen several answers on here, which tend to work. However, there is some odd behavior when I use a "jsTree" in my "left" area and jQuery UI tabs in the main/content area.

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" : "#" } 
                    } 
                }
            ]
        }, 
    });
});

我遇到的问题是，当我展开树（左侧）时，标签显示在正确的开始变得时髦。包含标签的区域（我相信的元素）垂直增长。

The problem I'm having is, as I expand the tree (on the left) the tabs on the right start getting funky. The area containing the tabs (the element I believe) grows vertically.

请看这个例子： http：/ /jsfiddle.net/codecraig/gBUw2/

推荐答案

Josiah说得对，但更好的解决办法就是改变明确技术的本质。 .ui-helper-clearfix 执行此操作：

Josiah has it right but a better solution is to change the nature of the clear-fix technique. The .ui-helper-clearfix does this:

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

问题是清除：两者。您可以通过以下方式获得所需的清算而不会丢失全宽度块显示：

And the problem is the clear:both. You can get the desired clearing without losing the full-width block display with this:

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

取代清除：两者 clear-fix ，其中溢出：隐藏 clear-fix 。

http://jsfiddle.net/ambiguous/BkWWW/

这篇关于CSS布局：2列固定流体（再次）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！