2

我在嵌套的 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/

4

2 回答 2

1

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

.CssWrapper div {
    width: 800px;
}

此外，删除 display:inline 和 overflow;scroll，除非你想要滚动条到处都是。

于 2013-02-11T21:14:17.333 回答
0

根据你给我的信息...

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

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

MoonKat1216 的回答也有效。他正在使用 Css 选择器来获取.CssWrapper类的 div 后代；这是更好的做法，因为它包含在您的 css 样式表中，并且比像我在这里那样在 javascript 中执行它更有条理，因为您可以更轻松地编辑您的 css 样式，而不是通过 javascript 代码搜索。但是，如果您是即时执行此操作，并更改值或类等。这将是要走的路。这真的取决于你的情况。

于 2013-02-11T21:16:06.107 回答