html - CSS 中的文件浏览器布局

Question

我想使用 HTML 和 CSS 构建一个文件浏览器，类似于所有常见的浏览器。我的问题原来是每个“行”中元素的宽度。我希望右侧的大小和编辑日期等属性值具有所需的自动宽度，左侧的文件名填写其余部分。

这很容易做到，但最终我希望所有列都具有相同的宽度(就像在表格中所做的那样)。

但是，CSS table 似乎不是替代方案，因为您无法正确设置 table-row 元素的样式，例如有一个封闭的边界。

我尝试了一些网格并返回到 flexbox...

<div class="file">
    <div class="property-name">
        Name.pdf
    </div>
    <div class="property-size">
        12 MB
    </div>
    <div class="property-date">
        12.08.2000
    </div>
</div>
<div class="file">
    <div class="property-name">
        Prooxey.pdf
    </div>
    <div class="property-size">
        1 TB
    </div>
    <div class="property-date">
        11.11.1111
    </div>
</div>

SASS:

.file
  display: flex
  [name^='property']
     flex: auto 0 0
  .property-name
     flex: auto 1 1

这显然不会同步 .file-columns 中属性元素的宽度

Answer 1

CSS-Grid 可以做到这一点。

注意:我已经删除了包装 .file div，因为它们是不必要的并且确实破坏了 CSS-Grid 布局

.files {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
}

.files div {
  border: 1px solid grey;
  padding: .25em;
}

<div class="files">
  <div class="property-name">
    Name.pdf
  </div>
  <div class="property-size">
    12 MB
  </div>
  <div class="property-date">
    12.08.2000
  </div>
  <div class="property-name">
    Prooxey.pdf
  </div>
  <div class="property-size">
    1 TB
  </div>
  <div class="property-date">
    11.11.1111
  </div>
</div>

由于每个文件集周围都需要边框，因此 CSS 表格将起作用..

.files {
  display: table;
  border-collapse: collapse;
}

.file {
  display: table-row;
  border: 1px solid grey;
}

.file div {
  display: table-cell;
  padding: .25em;
}

<div class="files">
  <div class="file">
    <div class="property-name">
      Name.pdf
    </div>
    <div class="property-size">
      12 MB
    </div>
    <div class="property-date">
      12.08.2000
    </div>
  </div>
  <div class="file">
    <div class="property-name">
      Prooxey.pdf
    </div>
    <div class="property-size">
      1 TB
    </div>
    <div class="property-date">
      11.11.1111
    </div>
  </div>
</div>