65. 豆瓣时间和视频

官网:

65. 豆瓣时间和视频 - 图1

自己写的:

65. 豆瓣时间和视频 - 图2

小图标

  • 官网的小图标使用的是给 img 元素添加伪元素,然后设置背景图。
  • 自己写的小图标,使用的是字体图标。

关键

  • 【操作】如何实现:第四项的长度比其他的长一些,但是布局依旧保持不变。

将10个容器都设置为行块盒,再加上 vertical-align: top; 即可。

注意:在类似于这样高度不固定的场景中,若使用浮动,往往会出现问题。