search

fezaoduke / fe-practice-hard

晚练课
69 stars 6 forks source link

第 100 期(W3C 标准-CSS-布局排版)：两端对齐 #103

Open wingmeng opened 5 years ago

wingmeng commented 5 years ago

已知如下 HTML 结构：

<dl>
  <dt>手机系统</dt>
  <dd>Android</dd>
  <dt>登录方式</dt>
  <dd>QQ互联登录</dd>
  <dt>绑定事件</dt>
  <dd>2019-01-02 00:01</dd>
  <dt>绑定状态</dt>
  <dd>成功</dd>
  <dt>备注</dt>
  <dd>如果需要修改绑定，请联系HR进行修改</dd>
</dl>

如何实现下图所示的两端布局效果？

image

最佳实践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;
}