这种圆圈+文字的布局如何实现？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› D3.js

推荐书目

› JavaScript 权威指南第 5 版

这是一个创建于 1930 天前的主题，其中的信息可能已经有所发展或是发生改变。

不用 D3 等库，谢谢。

avatar

圆圈和文字的数量不固定。

第 1 条附言 · 2019-08-13 16:08:19 +08:00

图好像看不到，链接地址如下：

https://www.17sucai.com/pins/34463.html

8 条回复 • 2019-08-16 15:55:49 +08:00

jjplay

2019-08-13 15:12:33 +08:00

waiaan

2019-08-13 15:23:09 +08:00

@jjplay 如果不引用第三方库，有什么思路吗？

VDimos

2019-08-13 15:24:43 +08:00 via Android

Canvas 一把梭

jjplay

2019-08-13 15:34:14 +08:00

就直接写个元素，border-radius 设为圆圈，display inline-block，让它自个儿靠左，谁超过父元素宽度了就自己换行

waiaan

2019-08-13 16:17:09 +08:00

@jjplay 那不会导致左边一列都是对齐的？

jjplay

2019-08-13 16:40:06 +08:00

那就居中对齐啊朋友，做开发就是要有灵活想法，尤其是前端奇技淫巧待你去研究

Zenyk

2019-08-14 10:18:51 +08:00

flex 布局配合 flex-wrap: wrap

waiaan

2019-08-16 15:55:49 +08:00

@Zenyk
@jjplay
谢谢。
不过这样元素排列不够紧致，会出现比较大的空隙。