V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
waiaan
V2EX  ›  JavaScript

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

  •  
  •   waiaan · 2019-08-13 14:31:39 +08:00 · 3622 次点击
    这是一个创建于 1690 天前的主题,其中的信息可能已经有所发展或是发生改变。

    不用 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
        1
    jjplay  
       2019-08-13 15:12:33 +08:00
    waiaan
        2
    waiaan  
    OP
       2019-08-13 15:23:09 +08:00
    @jjplay 如果不引用第三方库,有什么思路吗?
    VDimos
        3
    VDimos  
       2019-08-13 15:24:43 +08:00 via Android
    Canvas 一把梭
    jjplay
        4
    jjplay  
       2019-08-13 15:34:14 +08:00
    就直接写个元素,border-radius 设为圆圈,display inline-block,让它自个儿靠左,谁超过父元素宽度了就自己换行
    waiaan
        5
    waiaan  
    OP
       2019-08-13 16:17:09 +08:00
    @jjplay 那不会导致左边一列都是对齐的?
    jjplay
        6
    jjplay  
       2019-08-13 16:40:06 +08:00
    那就居中对齐啊朋友,做开发就是要有灵活想法,尤其是前端 奇技淫巧待你去研究
    Zenyk
        7
    Zenyk  
       2019-08-14 10:18:51 +08:00
    flex 布局 配合 flex-wrap: wrap
    waiaan
        8
    waiaan  
    OP
       2019-08-16 15:55:49 +08:00
    @Zenyk
    @jjplay
    谢谢。
    不过这样元素排列不够紧致,会出现比较大的空隙。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5313 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 204ms · UTC 07:12 · PVG 15:12 · LAX 00:12 · JFK 03:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.