新闻图文混排，列表页面有图和没图结合的css代码

网页设计过程中，常见有新闻图文混排的设计，列表页面有图和没图文章相结合展示效果是怎么实现的呢？html、css代码怎么写？

以上效果如何实现，下面是css代码及html内容
CSS代码

<style>
.news-tw a{
  display:flex;
  align-items:center;
  padding:5px 0;
} 
.news-tw .img-t img{
  width: 120px;
  height: auto; 
  margin-right:20px;border-radius:.2em;
} 
.news-tw .text h2{font-size:15px;line-height:20px;}
.news-tw .text p{font-size:13px;line-height:20px;margin:5px 0 5px 0;color:#666;white-space:normal;}
.news-tw .text em{font-size:13px;margin:0 10px 0 0;color:#999;}
</style>

html代码

有图
<li class="news-tw">
<a href="#">
  <span class="img-t"><img src="img/my_img.png" alt="Sample Image"></span>
  <div class="text">
    <h2>标题标题标题标题标题标题标题标题标题标题标题标题标题</h2>
    <p>这里是文这里是文字内容。这里是文字内容。这里是文字内容。这里是文字内容。这里是文字内容。这里是文字内。</p>
    <em class="icon-history iconfont"> 发布于 03-08</em> <em class="icon-feedback iconfont"> 500</em>
  </div>
  </a>
</li>
没图
<li class="news-tw">
<a href="#">
  <div class="text">
    <h2>标题标题标题标题标题标题标题标题标题标题标题标题标题</h2>
    <p>这里是文这里是文字内容。这里是文字内容。这里是文字内容。这里是文字内容。这里。</p>
    <em class="icon-history iconfont"> 发布于 03-08</em> <em class="icon-feedback iconfont"> 500</em>
  </div>
  </a>
</li>

以上就是新闻图文混排的实现方法。