父容器內部的兩個不同顏色的列

Question

如何設置我的.playing，.time-before和.time-after以及div，以便.diff-before-time-time-div將.playing div拆分爲等於寬度列並填充容器高度。

活動鏈接：https://riot-controls.herokuapp.com/

HTML：

<li each={ queue } onclick={ play }> 
     <span>{ title }</span> 
     <span>{ artist }</span> 
     <span>{ stringifyTime(length) }</span> 
     <div class='time-before'></div> 
     <div class='time-after'></div> 
     </li> 

CSS：

.playing { 
      color: orange; 
     } 
     .playing > .time-before { 
      background-color: green; 
      display: inline-block; 
      height: 100%; 
      float: left; 
     } 
     .playing > .time-after { 
      background-color: red; 
      display: inline-block; 
      height: 100%; 
      float: right; 
     } 

Answer 1

display:flex;basicly將做到這一點，可以換到幾行或列。

高度必須被移除，背景顏色是足夠

li { 
 
    color: orange; 
 
} 
 
.time-before { 
 
    background-color: green; 
 

 
} 
 
.time-after { 
 
    background-color: red; 
 
} 
 
li { 
 
    display:flex; 
 
    } 
 

 
li > div {flex:1;}

<li each={ queue } onclick={ play }> 
 
    <span>{ title }</span> 
 
    <span>{ artist }</span> 
 
    <span>{ stringifyTime(length) }</span> 
 
    <div class='time-before'></div> 
 
    <div class='time-after'></div> 
 
</li>