具有固定高度和水平滚动的Listview项目

时间:2018-02-23 07:39:12

标签: html css twitter-bootstrap

我想显示列表项,就像 Windows资源管理器列表视图一样。

即。 LIstview div应该有固定的高度,列表项应该水平滚动.Listview看起来应该与此类似。第一列列表项后应浮动到第二列,依此类推。

网格视图和详细信息视图我能够实现但面临此问题。请帮忙

.list-items {
  font-size: 20px;
  margin: 10px;
  font-weight: bold;
  color: #999;
  width: 150px;
  float: right;
}

.list-items .fa {
  color: #d4b670;
}

.list-view {
  max-height: 400px;
  overflow-x: hidden;
  overflow-y: scroll;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="listview">
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder1</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder2</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder3</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder4</span>
  </div>

  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
  <div class="list-items">
    <span class="fa fa-folder"></span>
    <span class="myfolder-name">My Folder</span>
  </div>
</div>

Listview应该看起来与此类似。第一列列表项后应浮动到第二列,依此类推。列表项应按列方式呈现而不是按行呈现。即。 Folder1是第一行第一列..文件夹2是第二行第一列所以..once达到固定高度它应该浮动到下一列

List View

1 个答案:

答案 0 :(得分:0)

创建一个包含少量文件夹div的父div,此父div将作为一行。创建你想要多少并浮动父div。 希望这段代码很有用。

https://codepen.io/NavaneethVijay/pen/Yejxga

.list-items {
    font-size:16px;
    margin:10px;
    font-weight:bold;
    color:#999;
    display: inline-block;
}

.listview .row {
    float: left;
}

.list-items .fa {
    color:#d4b670;
}

.listview{

    width: 50%;
    overflow: auto;
    white-space: nowrap;
}

<div class="listview">

    <div class="row">
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder1</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder2</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder3</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder4</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder5</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
    </div>

    <div class="row">
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
    </div>

    <div class="row">
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
    </div>

    <div class="row">
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
    </div>

    <div class="row">
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
    </div>
    <div class="row">
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
    </div>
    <div class="row">
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
    </div>
    <div class="row">
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
        <div class="list-items">
            <span class="fa fa-folder"></span>
            <span class="myfolder-name">My Folder</span>
        </div>
    </div>


</div>