console
<div class="box">
<ul>
<li>
<div class="photo">
<img src="" alt="" />
<div class="nums abs">10</div>
</div>
<div class="info">
<h3 class='ell'>张三张三张三张三</h3>
<p class='ell'>上传了xx视频xx视频xx视频xx视频xx视频</p>
</div>
<div class="circle abs"></div>
<div class="time abs">今天</div>
</li>
<li>
<div class="photo">
<img src="" alt="" />
<div class="nums abs">10</div>
</div>
<div class="info">
<h3 class='ell'>张三张三张三张三</h3>
<p class='ell'>上传了xx视频xx视频xx视频xx视频xx视频</p>
</div>
<div class="circle abs"></div>
<div class="time abs">08:00</div>
</li>
<li>
<div class="photo">
<img src="" alt="" />
<div class="nums abs">10</div>
</div>
<div class="info">
<h3 class='ell'>张三张三张三张三</h3>
<p class='ell'>上传了xx视频xx视频xx视频xx视频xx视频</p>
</div>
<div class="circle abs"></div>
<div class="time abs">今天</div>
</li>
<li>
<div class="photo">
<img src="" alt="" />
<div class="nums abs">10</div>
</div>
<div class="info">
<h3 class='ell'>张三张三张三张三</h3>
<p class='ell'>上传了xx视频xx视频xx视频xx视频xx视频</p>
</div>
<div class="circle abs"></div>
<div class="time abs">今天</div>
</li>
<li>
<div class="photo">
<img src="" alt="" />
<div class="nums abs">10</div>
</div>
<div class="info">
<h3 class='ell'>张三张三张三张三</h3>
<p class='ell'>上传了xx视频xx视频xx视频xx视频xx视频</p>
</div>
<div class="circle abs"></div>
<div class="time abs">今天</div>
</li>
</ul>
</div>
BFC
*{margin:0;padding:0;}
.abs{position:absolute}
.box{width:200px; height:500px;background:#eee;border-left:1px solid red;margin-left:50px;margin-top:30px;}
.box ul li{position:relative;list-style:none;margin-bottom:20px;}
.box ul li::after{content:'';width:10px;height:10px;display:block; overflow:hidden;}
.photo{float:left; width:50px;height:50px;border-radius:8px;background:#ccc; position:relative;margin-left:10px;overflow:hidden;}
.photo img{height:100%;text-align:center;max-width:100%;}
.nums{left:0;top:0;font-size:12px;width:18px; height:18px;background:blue;border-bottom-right-radius:8px;color:#fff;}
.time{left:-50px;top:0}
.circle{left:-6px;top:10px; width:12px; height:12px;border-radius:50%;background:red;z-index:2}
.circle::before{position:absolute;width:8px;height:8px; background:orange;content:'';border-radius:50%;z-index:1;left:2px;top:2px}
.info{margin-left:70px;}
.ell{width:100%;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;}
.box ul li:nth-child(1) .nums{background:red}
.box ul li:nth-child(2) .nums{background:green}