文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何用div创建树

问如何用div创建树
EN

Stack Overflow用户
提问于 2019-07-19 17:40:18
回答 3查看 493关注 0票数 0

我尝试创建带有几个缩进级别的div，这取决于之前的元素。

我看到我们可以用"ul“和"li”来创建树，但是我必须在我的例子)=中使用div。

​

代码语言：javascript
复制
#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;
}
代码语言：javascript
复制
<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”与我的“标题-2”对齐，因为它前面有一个“标题-2”。

https://jsfiddle.net/ghncdfpt/

如果你有什么线索可以帮我的话，谢谢。

css-selectors
html
css
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-07-19 19:54:19

一个讨厌的想法，但如果你知道你将有多少个连续的部分，它可能会工作。

此示例将适用于连续4个部分。注意最后一个错误的地方：

​

代码语言：javascript
复制
#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;
}

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

[data-id=title-3]~.element,
[data-id*=title]~.element~[data-id=title-3]~.element,
[data-id*=title]~.element~[data-id*=title]~.element~[data-id=title-3]~.element,
[data-id*=title]~.element~[data-id*=title]~.element~[data-id*=title]~.element~[data-id=title-3]~.element {
  margin-left: 40px;
}
代码语言：javascript
复制
<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="element">Element A</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="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 class="element">Element C</div>
  <div class="element">Element C</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 D</div>
  <div class="element">Element D</div>
  <div class="element">Element D</div>

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

​

我们可以添加更多的选择器，最后一节将起作用：

​

代码语言：javascript
复制
#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;
}

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

[data-id=title-3]~.element,
[data-id*=title]~.element~[data-id=title-3]~.element,
[data-id*=title]~.element~[data-id*=title]~.element~[data-id=title-3]~.element,
[data-id*=title]~.element~[data-id*=title]~.element~[data-id*=title]~.element~[data-id=title-3]~.element,
[data-id*=title]~.element~[data-id*=title]~.element~[data-id*=title]~.element~[data-id*=title]~.element~[data-id=title-3]~.element {
  margin-left: 40px;
}
代码语言：javascript
复制
<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="element">Element A</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="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 class="element">Element C</div>
  <div class="element">Element C</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 D</div>
  <div class="element">Element D</div>
  <div class="element">Element D</div>

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

​

这背后的诀窍是，我们在上一节的基础上增加了细节，以确保始终应用正确的样式。

票数 0
EN

Stack Overflow用户

发布于 2019-07-19 17:49:55

您应该使用这个+选择器，它的select元素紧接您前面的slelector之后：

代码语言：javascript
复制
#container [data-id=title-3] + .element {
    margin-left: 40px;
}

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

如果它下面有另一个.element div，那么添加以下规则，将~和+组合起来：

代码语言：javascript
复制
#container [data-id=title-3] + .element ~ .element {
   margin-left: 40px;
}

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

Stack Overflow用户

发布于 2019-07-19 17:57:22

您可以在标题div中嵌套.element div。只需要在height元素上将#container div更改为min-height。

​

代码语言：javascript
复制
#container {
  border: 2px solid black;
  padding: 10px;
}

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

.title {
  background-color: blueviolet;
}

.element {
  background-color: greenyellow;
  margin-top: 10px;
}

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

[data-id=title-3] {
  margin-left: 40px;
}
代码语言：javascript
复制
<div id="container">
  <div class="title" data-id="title-1">Title 1</div>
  <div class="title" data-id="title-2">
    Title 2
    <div class="element">Element A</div>
  </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 class="element">Element B</div>
  </div>
  
  <div class="title" data-id="title-1">Title 1</div>
  <div class="title" data-id="title-2">
    Title 2
    <div class="element">Element C</div>
  </div>
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/57117320

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档