CSS基础测试11：列表式卡片布局

题目：

我的回答：

//zxx: Firefox是有打点效果的

.list {
  width: 300px;
  box-sizing: border-box;
  line-height: 1.25;
  font-size: 13px;
  background: #fff8dc;
  border: 1px solid #e6dfc6;
  border-radius: 2px;
}

.list-title,
.list-item {padding: 12px 15px;}

.list-title {
  font-weight: 700;
  color: #737063;
  background: #f7f1d5;
}

.list-item {
  display: flex;
  margin: 0;
  border-top: 1px solid #ede7cd;
}

.list-item > a {
  /* 仅 Webkit 内核浏览器支持多行溢出打点效果，其他浏览器只截断 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  /* 设置最小和最大高度 */
  min-height: calc(13px * 1.25 * 1.25);
  max-height: calc(13px * 1.25 * 2);  /* 字体尺寸×行高×行数（2行） */

  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  color: #0077cc;
}

.list-item > .iconfont {
  margin-right: .5em;
  font-size: 16px;
}
.list-item > .icon-dialog {color: #46a2d9;}
.list-item > .icon-stack-overflow {color: #52575c;}

<!-- 使用了第三方 iconfont 资源 -->
<dl class="list">
  <dt class="list-title">标题</dt>
  <dd class="list-item">
    <i class="iconfont icon-dialog"></i>
    <a href="##">恭喜我们29个最老的测试版网站-他们现在不再是测试版了！</a>
  </dd>
  <dd class="list-item">
    <i class="iconfont icon-dialog"></i>
    <a href="##">《独角兽动物园》35；7:Nicolas访谈</a>
  </dd>
  <dd class="list-item">
    <i class="iconfont icon-stack-overflow"></i>
    <a href="##">减少需要重新审查的封闭问题数量的建议</a>
  </dd>
  <dd class="list-item">
    <i class="iconfont icon-stack-overflow"></i>
    <a href="##">实验：在接下来的30天内（直到2019-09-07），以3票为基准关闭和重新打开提出的问题</a>
  </dd>
</dl>

wingmeng / front-end-quiz

CSS基础测试11：列表式卡片布局 #27

题目：

我的回答：