CSS Layout: 2 колонки с фиксированной жидкостью (снова) - PullRequest
Новая
       3

CSS Layout: 2 колонки с фиксированной жидкостью (снова)

2 голосов
/ 01 апреля 2011

Я пытаюсь настроить макет с двумя столбцами, в котором левая область зафиксирована, а основное содержимое - жидкое.Я видел несколько ответов здесь, которые, как правило, работают.Однако при использовании «jsTree» в моей «левой» области и вкладок пользовательского интерфейса jQuery в основной / области содержимого наблюдается странное поведение.

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/

Ответы [ 3 ]

3 голосов
/ 01 апреля 2011

У Иосии все в порядке, но лучшее решение - изменить природу техники чёткого исправления. .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 clear-fix .

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

1 голос
/ 01 апреля 2011

В заголовке вкладок виджетов есть четкое исправление. обновленная скрипка .Вы можете исправить это с помощью макета не с плавающей запятой или переопределить CSS следующим образом: 

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

Это делает так, чтобы заголовок не расширял всю ширину контейнера.

0 голосов
/ 01 апреля 2011

Все, что вам нужно сделать, это просто настроить свой CSS, как это: 

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

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

Это также решило бы проблему, заключающуюся в том, что контейнер вкладок не расширяется на полную ширину. Хотя вы можете настроить ширину в процентах от # право на все, что вам нравится.

...