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。次に、すべての幅を 800px に設定します

MoonKat1216 の回答も機能します。.CssWrapper彼は Css セレクターを使用して、クラスの div 子孫を取得しています。これは、css スタイル シートに入り、JavaScript コードを検索する代わりに、CSS スタイルをより簡単に編集できるため、ここにあるように JavaScript で行うよりも整理されているため、より良い方法です。ただし、これをオンザフライで実行し、値やクラスなどを変更する場合は、これが適しています。それは本当にあなたの状況に依存しています。

于 2013-02-11T21:16:06.107 に答える