li要素の浮動divの後ろにプログレスバーを追加する

Question

HTMLとCSSで非常に基本的なファイルリストレイアウトを設計しています。動作していますが、次のコードが改善されて、より良い結果が得られ、ベストプラクティスに従うかどうかを知りたいと思います。私はI.E 9+もサポートすることを楽しみにしています。さらに、left-wingの後ろに進捗バーを追加したいと思います。言い換えれば、ファイル名と時間の後ろにダウンロードの進捗状況を全体として表示したいのです。

レビューしたい部分のみを表示しています。

HTML

<div id="list-content"> 
    <ul id="file_list"> 
     <li> 
      <div class="f_icon"><img src="images/Docs-icon.png"></div> 
      <div class="left_wing"> 
       <div class="f_name">File name Short and loooooooooooong.ext</div> 
       <div class="f_time">Sep 08, 2016</div> 
      </div> 
      <div class="right_wing"> 
       <div class="f_delete"><i class="fa fa-trash fa-align-center" aria-hidden="true"></i></div> 
       <div class="f_size">34.50 MB</div> 
      </div> 
     </li> 

     <li> 
      <div class="f_icon"><img src="images/Docs-icon.png"></div> 
      <div class="left_wing"> 
       <div class="f_name">File name Short.ext</div> 
       <div class="f_time">Sep 08, 2016</div> 
      </div> 
      <div class="right_wing"> 
       <div class="f_delete"><i class="fa fa-trash fa-align-center" aria-hidden="true"></i></div> 
       <div class="f_size">34.50 MB</div> 
      </div> 
     </li> 
    </ul> 
</div> 

CSS

#list-content 
{ 
    margin:auto; 
    margin-top: 5%; 
    left: 0; 
    right: 0; 
    overflow-y: auto; 
    position: absolute; 
    width: 90%; 
    height: calc(95% - 105px); 
} 
#file_list 
{ 
    width: 100%; 
} 
#file_list li 
{ 
    overflow: hidden; 
    padding-top: 4px; 
    padding-bottom: 4px; 
} 
.f_icon 
{ 
    width: 10%; 
    float: left; 
    text-align: center; 
} 
.f_icon img 
{ 
    width: 32px; 
    height: 32px; 
    display: block; 
} 
.left_wing 
{ 
    width: 50%; 
    float: left; 
} 
.f_name 
{ 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size: 16px; 
    color: #FFFFFF; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
} 
.f_time 
{ 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size: 12px; 
    font-style: italic; 
    color: cornflowerblue; 
    padding-top: 2px; 
} 
.right_wing 
{ 
    width: 40%; 
    float: right; 
    margin-top: 6px; 
} 
.f_size 
{ 
    float: right; 
    font-family: 'Source Sans Pro', sans-serif; 
    font-weight: bold; 
    color: #FFFFFF; 
} 
.f_delete 
{ 
    float: right; 
    font-family: 'Source Sans Pro', sans-serif; 
    color: #B10002; 
    margin-left: 15px; 
    margin-right: 4px; 
} 

PROBLEM

私は以下のコードのようなものを試してみましたが、それはのパディングと思われるプログレスバーの上書きするテキストとpローレスバーdoesntはよく見えるプラスwidth: 50%;のように見えない50％。

HTML

<div class="left_wing"> 
    <div class="progressbar"></div> 
    <div class="f_name">File name Short and loooooooooooong.ext</div> 
    <div class="f_time">Sep 08, 2016</div> 
</div> 

CSS

.progressbar 
{ 
    height: 30px; 
    position: fixed; 
    width: 50%; /*Testing purpose only*/ 
} 

Answer 1

そのような何か？うまくいけば

#list-content { 
 
    margin: auto; 
 
    margin-top: 5%; 
 
    left: 0; 
 
    right: 0; 
 
    overflow-y: auto; 
 
    position: absolute; 
 
    width: 90%; 
 
    height: calc(95% - 105px); 
 
} 
 
#file_list { 
 
    width: 100%; 
 
} 
 
#file_list li { 
 
    overflow: hidden; 
 
    padding-top: 4px; 
 
    padding-bottom: 4px; 
 
} 
 
.f_icon { 
 
    width: 10%; 
 
    float: left; 
 
    text-align: center; 
 
} 
 
.f_icon img { 
 
    width: 32px; 
 
    height: 32px; 
 
    display: block; 
 
} 
 
.left_wing { 
 
    position: relative; 
 
    width: 50%; 
 
    float: left; 
 
} 
 
.f_name 
 
{ 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    font-size: 16px; 
 
    color: #FFFFFF; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
} 
 
.f_time 
 
{ 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    font-size: 12px; 
 
    font-style: italic; 
 
    color: cornflowerblue; 
 
    padding-top: 2px; 
 
} 
 
.f_name, 
 
.f_time { 
 
    z-index: 3; 
 
    font-size: 1em; 
 
} 
 
.progressbar { 
 
    height: 3.2em; 
 
    position: absolute; 
 
    top: -0.1em; 
 
    left: -0.1em; 
 
    animation-name: load; 
 
    animation-duration: 2s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
    background: lightgray; 
 
    z-index: -1; 
 
    /*Testing purpose only*/ 
 
} 
 
@keyframes load { 
 
    from { 
 
    width: 0; 
 
    } 
 
    to { 
 
    width: 100%; 
 
    } 
 
}

<div id="list-content"> 
 
    <ul id="file_list"> 
 
    <li> 
 
     <div class="f_icon"> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg"> 
 
     </div> 
 
     <div class="left_wing"> 
 
     <div class="progressbar"></div> 
 
     <div class="f_name">File name Short and loooooooooooong.ext</div> 
 
     <div class="f_time">Sep 08, 2016</div> 
 
     </div> 
 
     <div class="right_wing"> 
 
     <div class="f_delete"><i class="fa fa-trash fa-align-center" aria-hidden="true"></i> 
 
     </div> 
 
     <div class="f_size">34.50 MB</div> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>