html - CSS 中的文件浏览器布局
问题描述
我想使用 HTML 和 CSS 构建一个文件浏览器,类似于所有常见的资源管理器。我的问题原来是每个“行”中元素的宽度。我希望右侧的大小和编辑日期等属性值具有所需的自动宽度,左侧的文件名填写其余部分。
这很容易做到,但最终我希望所有列都具有相同的宽度(就像在表格中所做的那样)。
但是,CSS 表格似乎不是替代方案,因为您无法正确设置表格行元素的样式,例如设置封闭边框。
我尝试了一些网格并返回到 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>
萨斯:
.file
display: flex
[name^='property']
flex: auto 0 0
.property-name
flex: auto 1 1
这显然不会同步 .file-columns 中属性元素的宽度
解决方案
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>