Question

我在嵌套div中有一个树形结构。每个嵌套的div应具有相同的宽度。演示此问题的示例：

<!DOCTYPE html>
<html>

    <head>
        <style>
            .CssWrapper {
                width: 800px;
                overflow: scroll;
                border: 1px solid #999;
            }
            .CssTreeContainer {
                width: auto;
                display: inline;
                float: left;
                padding-left:20px;
            }
            .CssTreeValue {
                width: auto;
                float: left;
                text-align: left;
                clear: both;
            }
            .ParentLabel {
                width: auto;
                float: left;
                text-align: left;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>

    <body>
        <div class="CssWrapper">
            <div class="CssTreeValue">
                <div class="ParentLabel">Main Node A</div>
                <div class="CssTreeContainer">
                    <div class="CssTreeValue">
                        <div class="ParentLabel">Node AA</div>
                        <div class="CssTreeContainer">
                            <div class="CssTreeValue">
                                <div class="ParentLabel">Node AAA</div>
                                <div class="CssTreeContainer">
                                    <div class="CssTreeValue">Node AAAA</div>
                                    <div class="CssTreeValue">Node AAAB</div>
                                </div>
                            </div>
                            <div class="CssTreeValue">
                                <div class="ParentLabel">Node AAB (some extra long text)</div>
                                <div class="CssTreeContainer">
                                    <div class="CssTreeValue">Node AABA</div>
                                </div>
                            </div>
                            <div class="CssTreeValue">Node AB</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="CssTreeValue">
                <div class="ParentLabel">Main Node B</div>
                <div class="CssTreeContainer">
                    <div class="CssTreeValue">
                        <div class="ParentLabel">Node BA</div>
                        <div class="CssTreeContainer">
                            <div class="CssTreeValue">
                                <div class="ParentLabel">Node BAA</div>
                                <div class="CssTreeContainer">
                                    <div class="CssTreeValue">Node BAAA</div>
                                    <div class="CssTreeValue">Node BAAB</div>
                                </div>
                            </div>
                            <div class="CssTreeValue">
                                <div class="ParentLabel">Node BAB</div>
                                <div class="CssTreeContainer">
                                    <div class="CssTreeValue">Node BABA</div>
                                </div>
                            </div>
                            <div class="CssTreeValue">Node BB</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="clear:both;" />
        <div id="result" />
    </body>
</html>

http://jsfiddle.net/UptXg/

Answer 1

您需要为所有嵌套div指定宽度，如下所示：

.CssWrapper div {
    width: 800px;
}

此外，删除显示：内联和溢出;滚动，除非你想要滚动条到处。

Answer 2

根据你给我的信息......

$('.CssWrapper').find('div').css({width: 800px});

这将找到类CssWrapper的元素，并搜索所有后代以查找div。然后它将所有宽度设置为800px

MoonKat1216的答案也有效。他正在使用Css选择器来获取.CssWrapper类的div后代;这是更好的练习，因为它进入你的CSS样式表，它比在我这里的javascript更有组织，因为你可以更轻松地编辑你的CSS样式，而不是通过JavaScript代码搜索。但是，如果您是在动态执行此操作，并更改值或类等。这将是要走的路。这真的取决于你的情况。

对齐div的css树

2 个答案: