search

wingmeng / front-end-quiz

前端小测试答题收集
0 stars 0 forks source link

CSS基础测试1：卡片式布局 #1

Open wingmeng opened 5 years ago

wingmeng commented 5 years ago

题目：

image

我的答案：

dl {
    max-width: 400px;
    padding: 5px 15px;
    line-height: 2;
    box-sizing: border-box;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 0 rgba(0,0,0,.15);
}

dt {display: inline;}

/* 灵感来自《CSS揭秘》P116 */
dd + dt::before {
    content: '\A';
    white-space: pre;
}

dd {
    float: right;
    margin: 0;
}

demo min

wingmeng commented 5 years ago

自我评分：一般

优秀、良好、一般、差劲

不足之处：

  1. 依赖行高来对齐，局限性比较大，如右侧多行时，布局会错位

学习收获：

  1. 解锁了新的布局姿势和思路
wingmeng commented 5 years ago

最佳实践1：DEMO

代码量少，容错性最强，语义最佳，维护成本极低

dl {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 1em;
}

dd {text-align: right;}

最佳实践2：DEMO

代码量非常少，兼容性非常好

dd {
  /* 5em = 左侧汉字最大长度 + 1em（间距） */
  margin: -1.5em 0 0 5em;
  text-align: right;
}