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>

既存の出力

私が望むようにapprecitedされるだろう。

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>

EDIT：

がボックスのそれぞれに対して固定heightを維持し、実施していますテキストの複数行ellipsis。あなたのデザインに合わせて、このheightを調整します。

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>