调整div及其内容的高度和宽度

Question

我正在尝试调整HTML父Div的高度和宽度，而不更改子div样式。是否可以调整div尺寸？

示例场景：我有一棵树，我打算将其用作创建多棵树的通用代码。一小一大等等。因此，在不更改树叶和茎样式（父div内的子div）的情况下，我们是否可以更改父div的尺寸，以便子div会相应地自动调整？

我的小提琴是here

<div class="tree" style="position:absolute;left:20px;right:20px;
height:200px;width:200px;

">


    <div id="leaf1" style="height:90px;width:90px;background-color:green;border-radius:60px;position:absolute;left:40px;top:80px;"></div>
    <div id="leaf2" style="height:90px;width:90px;background-color:green;border-radius:60px;position:absolute;left:100px;top:85px;"></div>
    <div id="leaf3" style="height:90px;width:90px;background-color:green;border-radius:60px;position:absolute;left:80px;top:40px;"></div>
    <div id="stem" style="height: 150px;width: 30px;background-color: brown;position: absolute;left: 100px;top: 100px; z-index:-1;"></div>


</div>

Answer 1

我不确定您为什么不能这样做：

也将css代码分开，易于管理，我为您修改了。

.tree {
  border: 1px solid black;
  position: relative;
  left: 20px;
  right: 20px;
  height: 300px; /* you can do it here */
  width: 300px;  /* you can do it here */
}

#leaf1 {
  height: 90px;
  width: 90px;
  background-color: green;
  border-radius: 60px;
  position: absolute;
  left: 40px;
  top: 80px;
}

#leaf2 {
  height: 90px;
  width: 90px;
  background-color: green;
  border-radius: 60px;
  position: absolute;
  left: 100px;
  top: 85px;
}

#leaf3 {
  height: 90px;
  width: 90px;
  background-color: green;
  border-radius: 60px;
  position: absolute;
  left: 80px;
  top: 40px;
}

#stem {
  height: 150px;
  width: 30px;
  background-color: brown;
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: -1;
}

<div class="tree">Parent Div
  <div id="leaf1"></div>
  <div id="leaf2"></div>
  <div id="leaf3"></div>
  <div id="stem"></div>
</div>