时间戳

首页 > 解决方案 > 如何用 div 创建树

html - 如何用 div 创建树

问题描述

我尝试根据之前的元素创建具有多个缩进级别的 div。

我看到我们可以用“ul”和“li”创建树，但我必须使用 div 来处理我的情况）=

#container {
  border: 2px solid black;
  padding: 10px;
}

#container div {
  height: 30px;
  border: 1px solid black;
}

.title {
  background-color: blueviolet;
}

.element {
  background-color: greenyellow;
}

[data-id=title-2] {
  margin-left: 20px;
}

[data-id=title-3] {
  margin-left: 40px;
}

#container [data-id=title-2]~.element {
  margin-left: 20px;
}

#container [data-id=title-3]~.element {
  margin-left: 40px;
}
<div id="container">
  <div class="title" data-id="title-1">Title 1</div>
  <div class="title" data-id="title-2">Title 2</div>
  <div class="element">Element A</div>

  <div class="title" data-id="title-1">Title 1</div>
  <div class="title" data-id="title-2">Title 2</div>
  <div class="title" data-id="title-3">Title 3</div>
  <div class="element">Element B</div>

  <div class="title" data-id="title-1">Title 1</div>
  <div class="title" data-id="title-2">Title 2</div>
  <div class="element">Element C</div>
</div>

我希望我的“元素 C”与我的“title-2”对齐，因为它前面有一个“title-2”。

https://jsfiddle.net/ghncdfpt/

如果您有任何线索可以帮助我，谢谢。

标签： htmlcsscss-selectors

解决方案

你应该使用这个+选择器，它选择紧跟在你前面的选择器之后的元素：

#container [data-id=title-3] + .element {
    margin-left: 40px;
}

#container [data-id=title-2] + .element {
    margin-left: 20px;
}

如果您在其.element下有另一个 div，请添加这些规则，合并~和+：

#container [data-id=title-3] + .element ~ .element {
   margin-left: 40px;
}

#container [data-id=title-2] + .element ~ .element {
   margin-left: 20px;
}

推荐阅读