Создать организационную диаграмму, используя HTML и CSS кодирование - PullRequest
Новая
       35

Создать организационную диаграмму, используя HTML и CSS кодирование

0 голосов
/ 30 августа 2018

Я новичок здесь и хочу попросить помощи в создании этой организационной диаграммы, как показано на рисунке ниже, с использованием HTML и CSS. Я пробую это уже несколько дней, но я все еще не могу составить организационную диаграмму, как показано на рисунке ниже.

enter image description here

Это моя кодировка. Это моя первая попытка создания организационной структуры с использованием кодирования Я все еще не могу найти решение. 

<!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 Ответ

0 голосов
/ 30 августа 2018

Полагаю, вы ищете что-то подобное. Прочитайте правила 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>
...