在父容器里面的两个不同色的专栏

Question

如何设置我的.playing，.time-before和.time-after和div的样式，以便.time-before和time-after div将.playing div拆分为相等的宽度列并填充容器高度

直播链接：{{3}}

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

$ npm install --save-dev babel-preset-es2015-loose babel-preset-es2015 基本会执行此操作，并且可以包含几行或多列。

必须删除

高度，背景色足够

display:flex;

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

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

li > div {flex:1;}