css实现新闻图文列表

HTML结构：

<div class="news-list">
  <ul>
    <li class="news-item">
      <div class="news-img">
        <a href="#"><img src="news-img-1.jpg"></a>
      </div>
      <div class="news-info">
        <h2><a href="#">新闻标题1</a></h2>
        <p>新闻摘要新闻摘要新闻摘要新闻摘要新闻摘要新闻摘要新闻摘要新闻摘要</p>
        <span class="news-time">2021-01-01</span>
      </div>
    </li>
    <li class="news-item">
      <div class="news-img">
        <a href="#"><img src="news-img-2.jpg"></a>
      </div>
      <div class="news-info">
        <h2><a href="#">新闻标题2</a></h2>
        <p>新闻摘要新闻摘要新闻摘要新闻摘要新闻摘要新闻摘要新闻摘要新闻摘要</p>
        <span class="news-time">2021-01-02</span>
      </div>
    </li>
    <li class="news-item">
      <div class="news-img">
        <a href="#"><img src="news-img-3.jpg"></a>
      </div>
      <div class="news-info">
        <h2><a href="#">新闻标题3</a></h2>
        <p>新闻摘要新闻摘要新闻摘要新闻摘要新闻摘要新闻摘要新闻摘要新闻摘要</p>
        <span class="news-time">2021-01-03</span>
      </div>
    </li>
  </ul>
</div>

CSS样式：

.news-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.news-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.news-img {
  width: 200px;
  height: 120px;
  margin-right: 20px;
  overflow: hidden;
}
.news-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-info {
  flex: 1;
}
.news-info h2 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}
.news-info p {
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.5;
}
.news-time {
  font-size: 14px;
  color: #999;
}

说明：

1. 将无序列表（ul）的样式设置为无序，并设置外边距和内边距为0；
2. 每个新闻列表项（li）使用弹性盒子（Flexbox）实现左图右文的布局；
3. 图片容器（.news-img）设置固定宽度和高度，并设置溢出隐藏（overflow: hidden）来避免图片尺寸不一致时显示异常；
4. 图片（img）设置为100%宽度和高度，使其充满图片容器；
5. 新闻信息容器（.news-info）使用flex-grow属性占据剩余的空间；
6. 标题（h2）和正文（p）设置合适的字号和行高，并设置一定的外间距（margin）；
7. 时间（.news-time）设置为小字体和灰色的颜色。