Question

我正试图筑巢一些div。每个div都是一个包含右div和左div的单元。左div可以包含更多单元或单个非子单元。基本树结构。但是，我似乎无法让css为我的目标而工作。

我为它创建了一个js小提琴，如下所示。代码也在下面。我还附上了一张我想要的照片。任何帮助表示赞赏。我对jquery / javascript解决方案持开放态度。

HTML

<div id="main">
    <div class="inmain">
        <div class="inleft">
            <div class="inthing">
                Thing THing Thing X
            </div>
            <div class="inmain">
                <div class="inleft">
                    <div class="inthing">
                        thing2 thing2 thing2 X
                    </div>
                </div>
                <div class="inright">
                    R<br/>
                    I<br/>
                    G<br/>
                    H<br/>
                    T<br/>
                    2
                </div>
            </div>
        </div>
        <div class="inright">
            R<br/>
            I<br/>
            G<br/>
            H<br/>
            T<br/>
            1
        </div>
    </div>
</div>

CSS

#main{
    width:600px;
    height:600px;
    background-color:grey;
    position:relative;
}
.inmain{
    width:100%;
    border:2px solid black;
    position:relative;
    height:100%;
}
.inleft{
    background-color:blue;
    position:relative;
    width:100%;
    margin-right:20px;
    height:100%;
}
.inright{
    background-color:green;
    position:absolute;
    width:20px;
    right:0px;
    top:0px;
}

参考图片 enter image description here

Answer 1

我根据你的html结构使用了嵌套类和nth-child或nth-of-type。请记住，我使用了padding-bottom：22px来考虑你的2px边框。

您可以尝试：

#main{
    width:600px;
    height:600px;
    position:relative;
}
.inmain{
    width:100%;   
    position:relative;
    height:100%;
}
.inmain:nth-of-type(2){
    border:2px solid black;
    position:relative;
    height:100%;  
    width:96%;
}
.inmain:nth-child(1) .inleft{
    background:white;
    position:relative;
    width:100%;
    margin-right:20px;
    height:100%;
    padding-bottom:22px;
}
.inmain:nth-child(2) .inleft{
    background:blue;
    position:relative;
    width:100%;
    margin-right:20px;
    height:100%; 
    padding-bottom:0;

}
.inmain .inleft .inmain .inright{
    background-color:#00FF00;
    position:absolute;
    width:20px;
    right:0px;
    top:0px;   
    height:100%;
    padding-bottom:0;
}
.inmain .inright{
    background-color:#00FF00;
    position:absolute;
    width:20px;
    right:0px;
    top:0px;   
    height:100%;
    padding-bottom:22px;
}

查看此DEMO： http://jsfiddle.net/atsFA/12/

Answer 2

使用下面的JQuery方法和css一起工作。如果使用一个滚动条，则宽度减少22px就是占用滚动条。

function setConstructSizes(element) {
    //Set split group heights
    element.find(".inthing").each(function () {
        var hR = $(this).parent().parent().children(".inright").first().height();
        if (hR > $(this).height()) {
            $(this).height(hR);
        }
    });
    //Set width of all inner lefts
    element.find(".inleft").each(function () {
        var p = $(this).parent();
        var w = p.width();
        $(this).width(w - 22);
    });
    //Set height of all inner rights
    element.find(".inright").each(function () {
        $(this).height($(this).parent().height());
    });
}

.inmain
{
    position:relative;
    width:100%;
    border-top:1px solid black;
    border-bottom:1px solid black;
    text-align:left;
}
.inleft
{
    position:relative;
}
.inright
{
    text-align:center;
    border-left:1px solid black;
    border-right:1px solid black;
    width:20px;
    position:absolute;
    right:0px;
    top:0px;
}

带右边框的CSS - 嵌套

2 个答案: