前端小测第一期(css布局)

前端小测-css 小测第一期题目:

一个简单也很常用的布局,左右排列的布局,左侧是标签信息,右侧是描述信息.如下图所示:

分别以几种不同的方式实现,不定宽度,有次自适应,考虑文字多行情况,和一些边界情况字数较多或者添加栏目等等~

移动端左右布局

移动端布局

已知 HTML 代码结构(HTML 代码结构不能改变)

1
2
3
4
5
6
7
8
9
10
11
12
13
<dl>
  <dt>手机系统</dt>
  <dd>Android</dd>

  <dt>登录方式</dt>
  <dd>QQ互联网登录</dd>

  <dt>登录时间</dt>
  <dd>2019-01-02 11:10</dd>

  <dt>绑定状态</dt>
  <dd>有效</dd>
</dl>

实现左右结构的布局,写出合理的 CSS 代码实现类似的需求.

几种不同的实现思路方法,见 codepen 网站,越是见到开放的需求,考虑的情况也越多

demo 地址:(使用 flex 和 grid 比较合理,移动端布局)

访问 demo 页面