来自张鑫旭2019-01-12 CSS 小测第 1 期 - 图1前端小测

题目

已知 HTML 如下

  1. <dl>
  2.   <dt>手机系统</dt>
  3.   <dd>Android</dd>
  4.   <dt>登录方式</dt>
  5.   <dd>QQ互联登陆</dd>
  6.   <dt>绑定时间</dt>
  7.   <dd>2019-01-02 11:10</dd>
  8.   <dt>绑定状态</dt>
  9.   <dd>有效</dd>
  10. </dl>

实现如下的布局
image.png

答案

极端内容

对于文本内容而言，所能出现的极端场景，包括下面三种：

  1. 文字内容很多；
  2. 连续的一串英文字符；
  3. 没有文字内容。

首先是连续英文字符。这个简单，我们可以使用 word-break 属性：

  1. word-break: break-all;

没有文字内容

  1. dd:empty::before {
  2.   content '-';
  3.   color: #999;
  4. }

代码实现

  1. /* 公共部分 */
  2. dl {
  3.     line-height: 1.5;
  4.     margin: 0; padding: 10px;
  5.     border: 1px solid #ccc;
  6.     background-color: #fff;    
  7. }
  8. dd {
  9.     word-break: break-all;    
  10.     text-align: right;
  11.     margin-left: 0;
  12. }
  13. dd:empty::before {
  14.     content: '-';    
  15.     color: #999;
  16. }
  17. /* absolute实现 */
  18. dt {
  19.     position: absolute;
  20. }
  21. dd {
  22.     margin-left: 5em;    
  23. }
  24. /* flex实现 */
  25. dl {
  26.     display: flex;
  27.     flex-wrap: wrap;
  28. }
  29. dt {
  30.     width: 5em;
  31. }
  32. dd {
  33.     width: calc(100% - 5em);
  34. }
  35. /* grid实现 */
  36. dl {
  37.     display: grid;
  38.     grid-template-columns: auto 1fr;
  39.     grid-column-gap: 1em;
  40. }
  41. /* float实现 */
  42. dt {
  43.     width: 5em;
  44.     float: left;    
  45. }
  46. dd {
  47.     overflow: hidden;    
  48. }
  49. /* 流体特性实现 */
  50. dd {
  51.     margin: -1.5em 0 0 5em;    
  52. }