使用 HTML 和 CSS 编码创建组织结构图
[英]Create organization chart using HTML and CSS coding
问题描述
I am new here and I want to ask for help for generating this organization chart as shown in the below image using HTML & CSS. I try it for a few days now but I still cannot make the organization chart as shown in the below image.
我是新来的，我想寻求帮助使用HTML和CSS生成如下图所示的组织结构图。我现在试了几天，但我仍然无法制作如下图所示的组织结构图。
This is my coding.这是我的编码。 It is my first to try doing organization chart using coding.这是我第一次尝试使用编码来制作组织结构图。 I still cannot find the solution.我仍然找不到解决方案。
<.DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1:0 Transitional//EN" "[http.//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional:dtd](http.//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional:dtd)"> <html xmlns="[http.//www.w3:org/1999/xhtml](http.//www.w3;org/1999/xhtml)"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html. charset=iso-8859-1" /> <style type="text/css">:jobtitlemain { position;relative: width;200px: height;100px: line-height;40px: border;2px solid #000: margin-bottom;50px: text-align;center: margin-left;auto: margin-right;auto. }:jobtitle { position;absolute: width;100px: height;40px: line-height;40px: border;2px solid #000: margin-bottom;50px: text-align;center. }:toplevel { position;relative: width;550px: height;150px: border;2px solid #000: border-bottom;none: margin-left;auto: margin-right;auto. }:toplevel2 { position;relative: width;150px: height;0px: border;2px solid #000: border-bottom;none: margin-left;70px: margin-right;auto: margin-top;-70px. }:toplevel3 { position;relative: width;150px: height;0px: border;2px solid #000: border-bottom;none: margin-left;70px: margin-right;auto: margin-top;70px. }:toplevel4 { position;relative: width;150px: height;0px: border;2px solid #000: border-bottom;none: margin-left;-70px: margin-right;auto: margin-top;-70px. }:toplevel5 { position;relative: width;150px: height;0px: border;2px solid #000: border-bottom;none: margin-left;70px: margin-right;auto: margin-top;-70px. }:secondlevel { position;absolute: top;114px: margin-left;-150px. }:secondlevelright { position;relative: top;94px: margin-left;150px. }:connector { bottom;-52px: height;50px: border-left;2px solid #000. }:connectorlong { bottom;-72px: height;70px: border-left;2px solid #000. }:centre {position;absolute:left;100px.}:centre1 {position;absolute:left;100px.}:centre2 {position;absolute:right;10px.}:left {position;absolute:left;50px:top;20px.}:right {position;absolute:left;250px:top;20px.}:right2 {position;absolute:left;100px:top;20px.}:offset {margin-top;90px:margin-left;50px;} </style> </head> <body> <div class="jobtitlemain"> <div class="connector centre"></div> Vice President </div> <div class="jobtitlemain"> <div class="connector centre"></div> Head Of Consulting Technoslogy Services </div> <div class="toplevel"> <div class="left jobtitle"> <div class="connector centre1"></div> Educatuon</div> <div class="connector centre2"></div> oil and gas</div> </div> </div> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2018-08-30 02:57:57
I believe you are looking for something like this. 我相信您正在寻找这样的东西。 Read through the CSS rules and let me know if you have any questions. 通读CSS规则，如果您有任何疑问，请告诉我。 Some additional considerations will need to be made if you would like this to be responsive, though it should work on most devices as-is. 如果您希望此功能能够做出响应，则需要考虑一些其他注意事项，尽管它应该可以在大多数设备上保持原样。
.box-row { text-align: center; } .box { border: 1px solid #000000; height: 50px; width: 120px; display: inline-block; } .bar { width: 30px; transform: rotate(90deg); margin: 10px auto 13px auto; } .horizontal-bar { display: inline-block; width: 35px; margin-bottom: 22px; margin-left: -5px; margin-right: -5px; } .box-group { display: inline-block; width: 48%; } .second { margin: 8px 70px; } .second-separator { width: 310px; margin-bottom: 45px; } .vertical-bar { width: 110px; margin-bottom: -30px; transform: rotate(90deg); }
<div class="box-row"> <div> <div class="box"> </div> <hr class="bar" /> </div> <div> <div class="box"> </div> <hr class="bar" /> </div> <hr class="second-separator" /> <div class="second"> <!-- Group #1 --> <div class="box-group"> <hr class="vertical-bar" /> <div class="box-row"> <div class="box"> </div> <hr class="horizontal-bar" /> <div class="box"> </div> </div> <div class="box-row"> <div class="box"> </div> <hr class="horizontal-bar" /> <div class="box"> </div> </div> </div> <!-- Group #2 --> <div class="box-group"> <hr class="vertical-bar" /> <div class="box-row"> <div class="box"> </div> <hr class="horizontal-bar" /> <div class="box"> </div> </div> <div class="box-row"> <div class="box"> </div> <hr class="horizontal-bar" /> <div class="box"> </div> </div> </div> </div> </div> <div> </div> </div>
解决方案2
0 2021-11-13 13:02:42
.box-row { text-align: center; } .box { border: 1px solid #000000; height: 50px; width: 120px; display: inline-block; } .bar { width: 30px; transform: rotate(90deg); margin: 10px auto 13px auto; } .horizontal-bar { display: inline-block; width: 35px; margin-bottom: 22px; margin-left: -5px; margin-right: -5px; } .box-group { display: inline-block; width: 48%; } .second { margin: 8px 70px; } .second-separator { width: 310px; margin-bottom: 45px; } .vertical-bar { width: 110px; margin-bottom: -30px; transform: rotate(90deg); }
<div class="box-row"> <div> <div class="box"> </div> <hr class="bar" /> </div> <div> <div class="box"> </div> <hr class="bar" /> </div> <hr class="second-separator" /> <div class="second"> <!-- Group #1 --> <div class="box-group"> <hr class="vertical-bar" /> <div class="box-row"> <div class="box"> </div> <hr class="horizontal-bar" /> <div class="box"> </div> </div> <div class="box-row"> <div class="box"> </div> <hr class="horizontal-bar" /> <div class="box"> </div> </div> </div> <!-- Group #2 --> <div class="box-group"> <hr class="vertical-bar" /> <div class="box-row"> <div class="box"> </div> <hr class="horizontal-bar" /> <div class="box"> </div> </div> <div class="box-row"> <div class="box"> </div> <hr class="horizontal-bar" /> <div class="box"> </div> </div> </div> </div> </div> <div> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用HTML和CSS的组织结构图 - Organization Chart Using HTML & CSS
使用 HTML、CSS 和 Bootstrap 的组织结构图 - Organization chart using HTML, CSS and Bootstrap
CSS组织结构图 - CSS Organization Structure Chart
使用CSS / HTML5的横向组织 - Horizontal organization using CSS/HTML5
HTML / CSS编码标准 - Html/ css coding standards
HTML和CSS编码指南 - HTML & CSS Coding Guidelines
CSS和HTML编码 - CSS and HTML coding
带有 CSS 编码的 HTML - HTML with CSS coding
CSS组织结构图线连接器问题 - CSS organization chart line connectors issue
在HTML / JS / CSS中创建时间表图表 - Create timeline chart in HTML/JS/CSS
相关标签