html - 如何在 CSS 中创建文件夹样式

Question

我有一个文档列表，我需要以图形方式表示这些文档，所以我想创建类似 Windows 文件夹样式的东西。但是我的CSS很差。一些帮助将不胜感激

.thread-reply-file {
  width: 100%;
  padding: 10px 0px 0px 12px;
  cursor: pointer;
}
.thread-reply-file {
  width: 80px;
  padding: 10px 8px 8px;
  margin-top: 10px;
  font-weight: bold;
  font-size: 14px;
  color: blue;
  float: left
}
.thread-reply-file span {
  margin-left: 10px;
}
.thread-reply-file img {}

<div title="Comments">
  <div class='thread-reply-file'>
    <img width='50' src='https://cdn4.iconfinder.com/data/icons/CS5/128/ACP_PDF%202_file_document.png'>
    <span>Haneeq Mohamed</span>
  </div>
  <div class='thread-reply-file'>
    <img width='50' src='https://cdn4.iconfinder.com/data/icons/CS5/128/ACP_PDF%202_file_document.png'>
    <span>Haneeq Mohamed</span>
  </div>
</div>

现有输出

我想要的方式。

Answer 1

这看起来怎么样？祝你好运!

如果您对以下代码有任何疑问，请告诉我:

.thread-reply-file {
  font-weight: bold;
  font-size: 14px;
  color: blue;
  float: left;
  cursor: pointer;
  border: 2px solid black;
  margin: 5px;
  padding: 5px;
  text-align: center;
  width: 80px;
}
.thread-reply-file span {
  display: block;
}
.thread-reply-file img {
  width: 50px;
}
div[title=Comments]:after {
  content: '';
  display: block;
  clear: both;
}

<div title="Comments">
  <div class='thread-reply-file'>
    <img src='https://cdn4.iconfinder.com/data/icons/CS5/128/ACP_PDF%202_file_document.png'>
    <span>Haneeq Mohamed</span>
  </div>
  <div class='thread-reply-file'>
    <img src='https://cdn4.iconfinder.com/data/icons/CS5/128/ACP_PDF%202_file_document.png'>
    <span>Haneeq Mohamed</span>
  </div>
</div>

编辑:

为每个框保持固定的高度，并为文本实现多行省略号。调整此高度以适合您的设计:

function ellipsizeTextBox(el) {
  var wordArray = el.innerHTML.split(' ');
  while (el.scrollHeight > el.offsetHeight) {
    wordArray.pop();
    el.innerHTML = wordArray.join(' ') + '...';
  }
}
var $this = document.getElementsByClassName('thread-reply-file');
for (var i = 0; i < $this.length; i++) {
  ellipsizeTextBox($this[i]);
}

.thread-reply-file {
  font-weight: bold;
  font-size: 14px;
  color: blue;
  float: left;
  cursor: pointer;
  border: 2px solid black;
  margin: 5px;
  padding: 5px;
  text-align: center;
  width: 80px;
  height: 85px;
  overflow: hidden;
}
.thread-reply-file span {
  display: block;
}
.thread-reply-file img {
  width: 50px;
}
div[title=Comments]:after {
  content: '';
  display: block;
  clear: both;
}

<div title="Comments">
  <div class='thread-reply-file'>
    <img src='https://cdn4.iconfinder.com/data/icons/CS5/128/ACP_PDF%202_file_document.png'>
    <span>Haneeq Mohamed</span>
  </div>
  <div class='thread-reply-file'>
    <img src='https://cdn4.iconfinder.com/data/icons/CS5/128/ACP_PDF%202_file_document.png'>
    <span>Haneeq Mohamed</span>
  </div>
  <div class='thread-reply-file'>
    <img src='https://cdn4.iconfinder.com/data/icons/CS5/128/ACP_PDF%202_file_document.png'>
    <span>This is a very long text and much longer than this</span>
  </div>
</div>