html - 如何将水平的家谱变成垂直的？

Question

此笔有横向家谱:
https://codepen.io/Muhsalp/pen/pBbNEX
我怎样才能把这个家谱变成垂直的？

方框 1 将位于顶部。方框 1.1 和方框 1.2 将在其下。

<div id='wrapper'><span class='label'>1</span><div class='branch lv1'><div class='entry'><span class='label'>1.1</span><div class='branch lv2'><div class='entry'><span class='label'>1.1.1</span><div class='branch lv3'><div class='entry'><span class='label'>1.1.1.1</span></div><div class='entry'><span class='label'>1.1.1.2</span></div></div></div><div class='entry'><span class='label'>1.1.2</span><div class='branch lv3'><div class='entry sole'><span class='label'>1.1.2.1</span></div></div></div></div></div><div class='entry'><span class='label'>1.2</span><div class='branch lv2'><div class='entry sole'><span class='label'>1.2.1</span></div></div></div></div></div></div></div>

Answer 1

我只是为垂直图表编写CSS。只需在 wrapper 元素中添加 verticalChart 类。

HTML

<div id='wrapper' class="verticalChart">

CSS

.verticalChart {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.verticalChart .label {
  position: static !important;
  margin: 0 10px !important;
}

.verticalChart .branch {
  margin: 100px 0 0 !important;
  display: flex;
}

.verticalChart .branch:before {
  border-left: 2px solid yellow;
  border-top: 0 !important;
  height: 50px !important;
  width: auto !important;
  left: 50% !important;
  top: -101px !important;
}

.verticalChart .entry {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.verticalChart .entry:before {
  height: auto;
  width: 100%;
  border-top: 2px solid red;
  border-left: 0 !important;
  top: -52px;
}

.verticalChart .entry:first-child:before {
    height: 10px;
    width: 50%;
    left: 50%;
}

.verticalChart .entry:last-child:before {
    height: 10px;
    width: 50%;
    border-radius: 0 10px 0 0;
    left: 0;
    top: -50px;
}

.verticalChart .entry:last-child:after {
    height: 49px;
    border-top: none;
    border-right: 2px solid green;
    border-bottom: 0;
    border-radius: 0 10px 0 0;
    margin-top: 1px;
    width: 10px;
    border-left: 0;
    left: calc(50% - 10px);
}

.verticalChart .entry:first-child:after {
    width: 10px;
}

.verticalChart .entry:after {
    height: 50px;
    border-left: 2px solid blue;
    border-top: 0;
    top: -50px;
    left: 50%;
}

.verticalChart .entry.sole:after {
    height: 51px;
    width: 0;
    margin-top: 0px;
    border-radius: 0;
    left: 50%;
}

我只是在下面的代码片段中更新了提到的更改。试试这个我希望它能帮助你。谢谢

*, *:before, *:after{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body{margin: 0px;}
#wrapper{position: relative;}
.branch{position: relative; margin-left: 250px;}
.branch:before {
content: "";
width: 50px;
border-top: 2px solid yellow;
position: absolute;
left: -100px;
top: 50%;
margin-top: 1px;
}

.entry {
position: relative;
min-height: 60px;
}
.entry:before {
content: "";
height: 100%;
border-left: 2px solid red;
position: absolute;
left: -50px;
}
.entry:after {
content: "";
width: 50px;
border-top: 2px solid blue;
position: absolute;
left: -50px;
top: 50%;
margin-top: 1px;
}
.entry:first-child:before {
width: 10px;
height: 50%;
top: 50%;
margin-top: 2px;
border-radius: 10px 0 0 0;
}
.entry:first-child:after {
height: 10px;
border-radius: 10px 0 0 0;
}
.entry:last-child:before {
width: 10px;
height: 50%;
border-radius: 0 0 0 10px;
}
.entry:last-child:after {
height: 10px;
border-top: none;
border-bottom: 2px solid green;
border-radius: 0 0 0 10px;
margin-top: -9px;
}
.entry.sole:before {
display: none;
}
.entry.sole:after {
width: 50px;
height: 0;
margin-top: 1px;
border-radius: 0;
}

.label {
display: block;
min-width: 150px;
padding: 5px 10px;
line-height: 20px;
text-align: center;
border: 2px solid purple;
border-radius: 5px;
position: absolute;
left: 0;
top: 50%;
margin-top: -15px;
}
.verticalChart {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.verticalChart .label {
  position: static !important;
  margin: 0 10px !important;
}

.verticalChart .branch {
  margin: 100px 0 0 !important;
  display: flex;
}

.verticalChart .branch:before {
  border-left: 2px solid yellow;
  border-top: 0 !important;
  height: 50px !important;
  width: auto !important;
  left: 50% !important;
  top: -101px !important;
}

.verticalChart .entry {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.verticalChart .entry:before {
  height: auto;
  width: 100%;
  border-top: 2px solid red;
  border-left: 0 !important;
  top: -52px;
}

.verticalChart .entry:first-child:before {
    height: 10px;
    width: 50%;
    left: 50%;
}

.verticalChart .entry:last-child:before {
    height: 10px;
    width: 50%;
    border-radius: 0 10px 0 0;
    left: 0;
    top: -50px;
}

.verticalChart .entry:last-child:after {
    height: 49px;
    border-top: none;
    border-right: 2px solid green;
    border-bottom: 0;
    border-radius: 0 10px 0 0;
    margin-top: 1px;
    width: 10px;
    border-left: 0;
    left: calc(50% - 10px);
}

.verticalChart .entry:first-child:after {
    width: 10px;
}

.verticalChart .entry:after {
    height: 50px;
    border-left: 2px solid blue;
    border-top: 0;
    top: -50px;
    left: 50%;
}

.verticalChart .entry.sole:after {
    height: 51px;
    width: 0;
    margin-top: 0px;
    border-radius: 0;
    left: 50%;
}

<div id='wrapper' class="verticalChart">
  <span class='label'>1</span>
  <div class='branch lv1'>
      <div class='entry'>
          <span class='label'>1.1</span>
          <div class='branch lv2'>
              <div class='entry'>
                  <span class='label'>1.1.1</span>
                  <div class='branch lv3'>
                      <div class='entry'>
                          <span class='label'>1.1.1.1</span>
                      </div>
                      <div class='entry'>
                          <span class='label'>1.1.1.2</span>
                      </div>
                  </div>
              </div>
              <div class='entry'>
                  <span class='label'>1.1.2</span>
                  <div class='branch lv3'>
                      <div class='entry sole'>
                          <span class='label'>1.1.2.1</span>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class='entry'>
          <span class='label'>1.2</span>
          <div class='branch lv2'>
              <div class='entry sole'>
                  <span class='label'>1.2.1</span>
              </div>
          </div>
      </div>
  </div>
</div>

Codepen 提到的更改在下面的代码片段中得到解决。谢谢

*, *:before, *:after{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body{margin: 0px;}
#wrapper{position: relative;}
.branch{position: relative;}
.branch:before {
content: "";
width: 50px;
border-top: 2px solid yellow;
position: absolute;
left: -100px;
top: 50%;
margin-top: 1px;
}

.entry {
position: relative;
min-height: 60px;
}
.entry:before {
content: "";
height: 100%;
border-left: 2px solid red;
position: absolute;
left: -50px;
}
.entry:after {
content: "";
width: 50px;
border-top: 2px solid blue;
position: absolute;
left: -50px;
top: 50%;
margin-top: 1px;
}
.entry:first-child:before {
width: 10px;
height: 50%;
top: 50%;
margin-top: 2px;
border-radius: 10px 0 0 0;
}
.entry:first-child:after {
height: 10px;
border-radius: 10px 0 0 0;
}
.entry:last-child:before {
width: 10px;
height: 50%;
border-radius: 0 0 0 10px;
}
.entry:last-child:after {
height: 10px;
border-top: none;
border-bottom: 2px solid green;
border-radius: 0 0 0 10px;
margin-top: -9px;
}
.entry.sole:before {
display: none;
}
.entry.sole:after {
width: 50px;
height: 0;
margin-top: 1px;
border-radius: 0;
}

.label {
display: block;
min-width: 150px;
padding: 5px 10px;
line-height: 20px;
text-align: center;
border: 2px solid purple;
border-radius: 5px;
position: absolute;
left: 0;
top: 50%;
margin-top: -15px;
}
.verticalChart {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.verticalChart .label {
  position: static !important;
  margin: 0 10px !important;
}

.verticalChart .branch {
  margin: 100px 0 0 !important;
  display: flex;
}

.verticalChart .branch:before {
  border-left: 2px solid yellow;
  border-top: 0 !important;
  height: 50px !important;
  width: auto !important;
  left: 50% !important;
  top: -101px !important;
}

.verticalChart .entry {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.verticalChart .entry:before {
  height: auto;
  width: 100%;
  border-top: 2px solid red;
  border-left: 0 !important;
  top: -50px;
  left: auto;
  margin-top: 0;
}

.verticalChart .entry:first-child:before {
    height: 10px;
    width: 50%;
    left: 50%;
}

.verticalChart .entry:last-child:before {
    height: 10px;
    width: 50%;
    border-radius: 0 10px 0 0;
    left: 0;
    top: -50px;
}

.verticalChart .entry:last-child:after {
    height: 49px;
    border-top: none;
    border-right: 2px solid green;
    border-bottom: 0;
    border-radius: 0 10px 0 0;
    margin-top: 1px;
    width: 10px;
    border-left: 0;
    left: calc(50% - 10px);
}

.verticalChart .entry:first-child:after {
    width: 10px;
}

.verticalChart .entry:after {
    height: 50px;
    border-left: 2px solid blue;
    border-top: 0;
    top: -50px;
    left: 50%;
}

.verticalChart .entry.sole:after {
    height: 51px;
    width: 0;
    margin-top: 0px;
    border-radius: 0;
    left: 50%;
}

<div id='wrapper' class='verticalChart'><span class='label'>XXX</span><div class='branch lv1'><div class='entry'><span class='label'>XXX</span><div class='branch lv2'><div class='entry'><span class='label'>XXX</span><div class='branch lv3'><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span></div></div></div><div class='entry'><span class='label'>XXX</span><div class='branch lv3'><div class='entry sole'><span class='label'>XXX</span></div></div></div></div></div><div class='entry'><span class='label'>XXX</span><div class='branch lv2'><div class='entry'><span class='label'>XXX</span><div class='branch lv3'><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span></div></div></div><div class='entry'><span class='label'>XXX</span><div class='branch lv3'><div class='entry sole'><span class='label'>XXX</span></div></div></div><div class='entry'><span class='label'>XXX</span><div class='branch lv3'><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span></div></div></div><div class='entry'><span class='label'>XXX</span></div></div></div><div class='entry'><span class='label'>XXX</span><div class='branch lv2'><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span><div class='branch lv3'><div class='entry sole'><span class='label'>XXX</span></div></div></div><div class='entry'><span class='label'>XXX</span><div class='branch lv3'><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span></div></div></div><div class='entry'><span class='label'>XXX</span><div class='branch lv3'><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span></div></div></div></div></div><div class='entry'><span class='label'>XXX</span><div class='branch lv2'><div class='entry'><span class='label'>XXX</span><div class='branch lv3'><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span></div></div></div><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span><div class='branch lv3'><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span></div></div></div></div></div><div class='entry'><span class='label'>XXX</span><div class='branch lv2'><div class='entry'><span class='label'>XXX</span><div class='branch lv3'><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span></div></div></div><div class='entry'><span class='label'>XXX</span><div class='branch lv3'><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span></div></div></div><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span><div class='branch lv3'><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span></div></div></div></div></div><div class='entry'><span class='label'>XXX</span><div class='branch lv2'><div class='entry'><span class='label'>XXX</span><div class='branch lv3'><div class='entry sole'><span class='label'>XXX</span></div></div></div><div class='entry'><span class='label'>XXX</span><div class='branch lv3'><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span></div></div></div><div class='entry'><span class='label'>XXX</span><div class='branch lv3'><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span></div></div></div><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span></div></div></div><div class='entry'><span class='label'>XXX</span></div><div class='entry'><span class='label'>XXX</span><div class='branch lv2'><div class='entry'><span class='label'>XXX</span><div class='branch lv3'><div class='entry sole'><span class='label'>XXX</span></div></div></div><div class='entry'><span class='label'>XXX</span></div></div></div><div class='entry'><span class='label'>XXX</span><div class='branch lv2'><div class='entry sole'><span class='label'>XXX</span></div></div></div></div></div></div></div>