html - 如何使用CSS样式化递归目录？

Question

我正在尝试使用来自 node.js 服务器的 json 数据以 html 形式显示递归目录，并将其用作 dustjs-linkedin 的渲染上下文。模板。数据包含如下结构:

{
  "isDirectory": true,
  "path": "",
  "name": "",
  "files": [
    {
      "name": "Light House.jpg",
      "filename": "Light%20House.jpg",
      "path": "/Light%20House.jpg",
      "bytes": 561276,
      "date": "2012-07-25T16:30:45.094Z",
      "prettyDate": "Jul 25 2012 11:30:45",
      "type": "image/jpeg",
      "size": "548.1 kB",
      "indent": 15,
      "id": "file0"
    },
    {
      "isDirectory": true,
      "path": "/folder0",
      "name": "folder0",
      "files": [
        {
          "name": "Desert.jpg",
          "filename": "Desert.jpg",
          "path": "/folder0/Desert.jpg",
          "bytes": 845941,
          "date": "2012-07-25T16:30:41.301Z",
          "prettyDate": "Jul 25 2012 11:30:41",
          "type": "image/jpeg",
          "size": "826.1 kB",
          "indent": 30,
          "id": "file0_0"
        }
      ],
      "id": "file0_0",
      "indent": 15,
      "bytes": 845941,
      "date": "2012-07-25T16:30:41.301Z",
      "prettyDate": "Jul 25 2012 11:30:41",
      "size": "826.1 kB"
    },
    {
      "isDirectory": true,
      "path": "/folder1",
      "name": "folder1",
      "files": [
        {
          "name": "Jellyfish.jpg",
          "filename": "Jellyfish.jpg",
          "path": "/folder1/Jellyfish.jpg",
          "bytes": 775702,
          "date": "2012-07-25T16:30:41.266Z",
          "prettyDate": "Jul 25 2012 11:30:41",
          "type": "image/jpeg",
          "size": "757.5 kB",
          "indent": 30,
          "id": "file0_1"
        }
      ],
      "id": "file0_1",
      "indent": 15,
      "bytes": 775702,
      "date": "2012-07-25T16:30:41.266Z",
      "prettyDate": "Jul 25 2012 11:30:41",
      "size": "757.5 kB"
    },
    {
      "isDirectory": true,
      "path": "/folder2",
      "name": "folder2",
      "files": [
        {
          "name": "Koala.jpg",
          "filename": "Koala.jpg",
          "path": "/folder2/Koala.jpg",
          "bytes": 780831,
          "date": "2012-07-25T16:30:41.384Z",
          "prettyDate": "Jul 25 2012 11:30:41",
          "type": "image/jpeg",
          "size": "762.5 kB",
          "indent": 30,
          "id": "file0_2"
        }
      ],
      "id": "file0_2",
      "indent": 15,
      "bytes": 780831,
      "date": "2012-07-25T16:30:41.384Z",
      "prettyDate": "Jul 25 2012 11:30:41",
      "size": "762.5 kB"
    },
    {
      "isDirectory": true,
      "path": "/folder3",
      "name": "folder3",
      "files": [
        {
          "name": "Penguins.jpg",
          "filename": "Penguins.jpg",
          "path": "/folder3/Penguins.jpg",
          "bytes": 777835,
          "date": "2012-07-25T20:42:31.170Z",
          "prettyDate": "Jul 25 2012 15:42:31",
          "type": "image/jpeg",
          "size": "759.6 kB",
          "indent": 30,
          "id": "file0_4"
        }
      ],
      "id": "file0_4",
      "indent": 15,
      "bytes": 777835,
      "date": "2012-07-25T20:42:31.170Z",
      "prettyDate": "Jul 25 2012 15:42:31",
      "size": "759.6 kB"
    }
  ],
  "id": "file0",
  "indent": 0,
  "bytes": 3741585,
  "date": "2012-07-25T20:42:31.170Z",
  "prettyDate": "Jul 25 2012 15:42:31",
  "size": "3.6 MB"
}

目前的渲染模板是这样的:

<!-- views/directory.dust -->
<!-- note that {.parentId} is equal to "file0" initially -->
{?.isDirectory}
<div class="collapse file-stats {parentId}" data-toggle="collapse" data-target="[class*={.id}]" style="font-size:15px">
    <div class="file-name">
        <div style="display:inline-block;width:{.indent}px"></div>
        <i class="icon-folder-open"></i> 
        {.name}
    </div>
    <div class="file-size">
        {.size}
    </div>
    <div class="file-date">
        {.prettyDate}
    </div>
</div>
{#.isDirectory parentId=.id}
    {#files}
        {>"views/directory.dust"/}
    {/files}
{/.isDirectory}
{:else}
<div class="collapse file-stats {.id}" style="font-size:15px">
    <div class="file-name">
        <div style="display:inline-block;width:{.indent}px"></div>
        <i class="icon-file"></i> 
        {.name}
    </div>
    <div class="file-size">
        {.size}
    </div>
    <div class="file-date">
        {.prettyDate}
    </div>
    <!--<span class="btn-group">
        <a class="btn btn-mini" href="/projects/{uri}/downloads/{.path}">
            <i class="icon-download"></i>
        </a>
        <button class="btn btn-mini" onclick="settings('/projects/{uri}/update/{.path}', '{.filename}', '{.path}')">
            <i class="icon-edit"></i>
        </button>
    </span>
    <a class="btn btn-mini btn-danger pull-right" href="/projects/{uri}/remove/{.path}">
        <i class="icon-trash"></i>
    </a>
    <div class="clearfix"></div>-->
</div>
{/.isDirectory}

问题是，截至目前， bootstrap 的折叠插件不适用于 display:table-row 元素，因此我正在寻找一种方法，使 html 输出垂直对齐 file-name、file-size 和 file-date 类的元素，同时缩进每个文件各自数量的文件夹/文件图标。我意识到这是一个相当具体的问题，所以我愿意接受任何重新思考我这样做的方式的建议(除非我不会明显改变 View 引擎或我正在使用的平台)。

编辑

我想指出的是，到目前为止，我提到的上一段中的所有内容都运行良好，除了折叠插件之外。我还可能指出，我用来实现垂直对齐的所有 css 都在这里:

.files {
    display:table;
}

.file-stats {
    display:table-row;
}

.file-name, .file-size, .file-date {
    padding: 0px 4px 0px 4px;
}

.file-name {
    display:table-cell;
    overflow: hidden;
    text-overflow:ellipsis;
}

.file-size {
    display:table-cell;
    overflow: hidden;
    text-overflow:ellipsis;
}

.file-date {
    display:table-cell;
    overflow: hidden;
    text-overflow:ellipsis;
}

Answer 1

使用 display:inline-block 和 a placeholder在不使用 display:table-row 的情况下垂直对齐元素。要处理递归缩进，请将 div class="collapse" 替换为 blockquote class="collapse" 可能有效。