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>

标签： htmlcss

Answer 1

我会使用 CSStransform: rotate()属性。我创建了一个名为的自定义 CSS 类rotate，我将其附加到您的根目录<div>，标识符为 wrapper ie <div id:"wrapper">。

.rotate {
   transform: rotate(90deg); 
}

执行 90 度旋转，将图表垂直对齐，而不是水平对齐。

我还在margin-top自定义类中添加了一个属性，rotate以将您的图表向下移动到视图中。虽然你可能不得不摆弄这个，因为你有硬编码的元素大小。下面附上我的代码沙箱和工作示例：

*, *: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;
}

.rotate {
   margin-top: 160px;
   transform: rotate(90deg); 
}

<div id='wrapper' class="rotate"><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>

希望这会有所帮助！