【问题标题】:flowchart diagram in HTML/CSS positioning?HTML / CSS定位中的流程图?
【发布时间】:2012-04-19 13:58:34
【问题描述】:

我正在尝试使用 HTML 和 CSS 制作流程图,但对于我用于线条框子框和答案的 div 数量来说,这证明非常困难。

这是我的 Jsfiddle,创建此流程图并定位它们的最佳方法是什么?

这是我迄今为止尝试过的: http://jsfiddle.net/xyQPT/7/

jquery 可以用来定位 div 吗?甚至用箭头连接它们?

【问题讨论】:

  • 您不能设置<ul> 的样式吗?无论如何,您似乎正朝着那个方向前进……您还可以使用 jQuery 或其他东西将<ul>(或其他格式)转换为美观的格式。
  • UL? ul 可以单独定位 LI 吗?什么更容易.. 创建 div 和 css 是一场噩梦。
  • mxGraphRaphael 怎么样?
  • @BradChristie,它将成为网站页面内的图表。
  • 所以它需要对 SEO 友好。

标签: jquery html css xhtml flowchart


【解决方案1】:

我建议为您的子项目使用 UL,然后只需使用背景图像并将文本偏移到背景图像的宽度即可。这将呈现连接的外观。

【讨论】:

  • 在线没有自动化工具。我会在 Photoshop 中完成并保存图像/
  • 定位 30 个 div 是一场噩梦!!加上 10 个“线”和“箭头”
  • 如果你使用 CSS 类,这不是一场噩梦;我猜你可以在 5 节课内完成你想做的事情。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-09-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-07-15
  • 1970-01-01
相关资源
最近更新 更多