Question

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

这很容易做到，但是最终我希望所有列都具有相同的宽度（就像在表中一样）。

但是，CSS表似乎不是一种替代方法，因为您无法正确设置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列之间同步属性元素的宽度

Answer 1

CSS-Grid可以做到这一点。

注意：我删除了包装.file div，因为它们是不必要的，并且确实破坏了CSS网格布局

.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>

CSS中的文件浏览器布局

1 个答案: