使用 HTML 和 CSS 编码创建组织结构图

Question

我是新来的，我想寻求帮助以使用 HTML & CSS 生成如下图所示的组织结构图。试了几天了还是做不出下图的组织结构图

这是我的代码。这是我第一次尝试使用编码来制作组织结构图。我仍然找不到解决方案。

<!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>

Answer 1

我相信您正在寻找这样的东西。通读 CSS 规则，如果您有任何问题，请告诉我。如果您希望它具有响应性，则需要考虑一些额外的因素，尽管它应该可以在大多数设备上正常工作。

.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>

使用 HTML 和 CSS 编码创建组织结构图

Create organization chart using HTML and CSS coding

html

css

organizational-chart