代码之家 › 专栏 › 技术社区 › learner

创建多个子div

css html

-1

learner · 技术社区 · 4 年前

我必须创建一个在另一个里面的div:

我尝试了这个代码,但不明白解决这个问题的正确方法是什么:

<div style="background-color: yellow;">
  One
  <div style="background-color: blue;">
    Two
    <div style="background-color: black;">
      Three
      <div style="background-color: grey;">
        Four
      </div>
    </div>
  </div>
</div>

这是我的代码输出:

1 回复 | 直到 4 年前

ali memar 4 年前

我认为这个代码就是你想要的

div {
  background-color: yellow;
  width: 200px;
  height: 200px;
  padding-left: 30px;
}

div div {
  background-color: blue;
  width: 150px;
  height: 150px;
  padding-top: 10px;
}

div div div {
  background-color: black;
  width: 100px;
  height: 100px;
  padding-top: 30px;
}

div div div div {
  background-color: grey;
  width: 25px;
  height: 25px;
}

<div>
  <div>
      <div>
          <div></div>
      </div>
  </div>
</div>

Sohan Arafat 4 年前

您必须在代码中放入z索引:

一

<div style="background-color: blue;z-index:8;">
    Two
    <div  style="background-color: black;z-index:7;">
        Three
        <div  style="background-color: grey;z-index:6;">
            Four
        </div>
    </div>
</div>
</div>

然后您也可以在代码中添加框效果。要更好地理解盒子效应,请参阅 this

j08691 4 年前

你走在正确的轨道上!你的HTML是正确的,你只需要CSS。试着弄一些填充物来把它做好。

div {
  padding: 30px;
}

<div style="background-color: yellow;">
  One
  <div style="background-color: blue;">
    Two
    <div style="background-color: black;">
      Three
      <div style="background-color: grey;">
        Four
      </div>
    </div>
  </div>
</div>

之所以看起来这些块是一个在另一个上面的,只是因为文本给了div一些高度。另一个是他们共享边界。填充会将这些边界拉开,你会开始看到你的元素实际上处于你需要的精确位置。

skaz 4 年前

编辑:你说创建,所以我认为你想通过编程在彼此内部创建div。如果你只是想创建一个包含div的HTML,那么你已经正确地设置了HTML,你只需要将每个div的宽度和高度设置为小于其父div的100%(请参阅我的CSS,将宽度和高度设为90%。我会保留下面的代码,以防它对你有任何帮助。

附加片段向您展示如何在div中创建div。更重要的是,它向您展示了如何找到最深的div,这样您就可以在该div中添加一个新的div。祝您好运。

const addDivButton = document.querySelector('.add_div_button');
const mainDiv = document.querySelector('.main_div');
addDivButton.addEventListener('click', e => {
    allChildren = mainDiv.querySelectorAll('div');
    const allChildrenArray = Object.values(allChildren)
    let lastChild;
    let newChild = document.createElement('div')
    newChild.id = `child_${allChildrenArray.length+1}`
    if (allChildren.length > 0) {
        lastChild = allChildrenArray[allChildrenArray.length - 1]
    } else {
        lastChild = mainDiv
    }
    if (getComputedStyle(lastChild).backgroundColor === 'rgb(80, 80, 80)') {
        newChild.style.backgroundColor = 'rgb(175, 175, 175)'
    } else {
        newChild.style.backgroundColor = 'rgb(80, 80, 80)'
    }
    lastChild.append(newChild)
})

.main_div {
    height: 90vh;
    width: 90vw;
    background-color: rgb(175, 175, 175);
}

.main_div div {
    width: 90%;
    height: 90%;
}

<button class="add_div_button">Click to Add Div</button>
    <div class="main_div">
        

    </div>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

11 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

11 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

12 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

12 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

12 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前