JSFiddle - React, Tailwind, and code Playground

by Bi jiabo

HTML

<div class="item">
    <div class="img">
        <img src="https://cdn.v2ex.co/avatar/02b2/9213/39707_large.png" alt="">
        <div class="meta">2015年11月6日20:26:55</div>
        <div class="meta_white"></div>
    </div>
    
    <div class="text">今天公司有一个 task</div>
        
    <div class="meta_bottom">2015年11月6日20:26:55</div>
</div>


    
<div class="item">
    <div class="img">
        <img src="https://cdn.v2ex.co/avatar/02b2/9213/39707_large.png" alt="">
        <div class="meta">2015年11月6日20:26:55</div>
        <div class="meta_white"></div>
    </div>
    
    <div class="text">
        今天公司有一个 task ，在展示文章列表时，如果某个文章有缩略图，那么 summary 环绕缩略图排布。这是一个非常简单的问题， float:left 完美解决。但是，难点是在 summary 后面要跟着一行 post meta ，显示作者、评论数等等，没有缩略图时， post meta 直接跟着 summary 就可以了，但是，有缩略图时就会略显繁琐，分两种情况
    </div>
    
    <div class="meta_bottom">2015年11月6日20:26:55</div>
</div>

CSS

body{
    font: 12px;
    line: 1.5
}
.item{
    position: relative;
    width: 300px;
    clear: both;
    margin-bottom: 30px;
    overflow: hidden;
}
.img{
    position: relative;
    float: left;
    margin-right: 10px;
    /* height: 50px; */
}

.img .meta{
    position:absolute;
    bottom: 0;
    margin-left: 100%;
    width: 200px;
    padding-left: 10px;
    background-color: white;
    z-index: -1;
}
.img .meta_white{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: white;
    z-index: -1;
}

.item .meta_bottom{
    position:absolute;
    bottom: 0;
    left: 0;
    margin-top: -20px;
    width: 200px;
    z-index: -2;
}

.text{
    min-height: 30px;
    background-color: white;
    z-index: 999;
    margin-bottom: 30px;
}