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

waiaan · 2019-08-13T06:31:39Z

不用 D3 等库，谢谢。圆圈和文字的数量不固定。

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› D3.js

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 2650 days ago, the information mentioned may be changed or developed.

不用 D3 等库，谢谢。

avatar

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

Supplement 1 · Aug 13, 2019

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

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

8 replies • 2019-08-16 15:55:49 +08:00

jjplay

Aug 13, 2019

waiaan

Aug 13, 2019

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

VDimos

Aug 13, 2019 via Android

Canvas 一把梭

jjplay

Aug 13, 2019

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

waiaan

Aug 13, 2019

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

jjplay

Aug 13, 2019

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

Zenyk

Aug 14, 2019

flex 布局配合 flex-wrap: wrap

waiaan

Aug 16, 2019

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