Question

我正在构建一个从javascript对象加载文件夹/文件树的文件系统。它工作得非常好，但是现在我正试图将整个东西限制在一个我可以滚动的框中。问题是框（.explorer）将文件和文件夹的宽度限制为它自己的宽度。文件和文件夹文本不受约束，只有它们的背景颜色。

这是CSS和HTML。我希望你能提供帮助。

.explorer{
    width:100px;
    height:100px;
    margin:35px;
    float:left;
    overflow:auto;
}
.folder, .file{
    width:100%;
    padding:4px 6px;
    cursor: pointer;
    Background:#212121;
    color:#fff;
}
.file{
    Background:#eb9824;
}
.hide, .show{
    margin-left:20px;
}

javascript生成的粗略HTML的一部分

<div class="explorer">

    <div class="folder">root</div>
    <div class="show" id="rootcontents">

        <div class="folder" id="root-folder1">folder1</div>
        <div class="show" id="root-folder1contents">

            <div class="folder" id="root-folder1-folder1">folder1</div>
            <div class="hide" id="root-folder1-folder1contents" style="display: block;">

                <div class="folder" id="root-folder1-folder1-folder1">folder1</div>
                <div class="hide" id="root-folder1-folder1-folder1contents" style="display: block;">

                    <div class="file" id="root-folder1-folder1-folder1-file1">file1</div>
                    <div class="file" id="root-folder1-folder1-folder1-file2">file2</div>

                </div>
            </div>

            <div class="folder" id="root-folder1-folder2">folder2</div>
            <div class="hide" id="root-folder1-folder2contents" style="display: none;">

                <div class="folder" id="root-folder1-folder2-folder1">folder1</div>
                <div class="hide" id="root-folder1-folder2-folder1contents" style="display: none;">

                    <div class="file" id="root-folder1-folder2-folder1-file1">file2</div>
                    <div class="file" id="root-folder1-folder2-folder1-file2">file2</div>

                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我称这是一个错误。 .explorer框的背景适合容器，而不是内容，这是不寻常和不受欢迎的。

你的情况下的快速修复是在.explorer内插入一个虚拟div，并设置style="float: left"，这将提示浏览器重新计算其子节点的盒子大小，而不是它的父节点宽度。

http://jsfiddle.net/G9v4w/2/

允许动态大小的子Div在较小的父div内部溢出：auto大于其父级

1 个答案: