JSFiddle - React, Tailwind, and code Playground

by jarlyyn

HTML

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

CSS

.item{margin-bottom:2em}
img{float:left}
.text{padding-bottom:1em}
.img:after{display:block;content:'';clear:both}
.meta{color:blue;margin-top:-1em;}