Question

我试图在不更改子div样式的情况下调整HTML父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

仅使用背景而不是内部div来构建它，并依靠百分比值：

.tree {
  border:1px solid;
  width:100px;
  display:inline-block;
  background:
    radial-gradient(circle at 36% 51%,green 22%,transparent 23%),
    radial-gradient(circle at 52% 37%,green 22%,transparent 23%),
    radial-gradient(circle at 64% 52%,green 22%,transparent 23%),
    linear-gradient(brown,brown) bottom/15% 50%;
  background-repeat:no-repeat;
}
.tree:before {
  content:"";
  display:block;
  padding-top:150%;
}

<div class="tree"></div>
<div class="tree" style="width:200px;"></div>
<div class="tree" style="width:250px;"></div>
<div class="tree" style="width:50px;"></div>

Answer 2

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

我还为您修改了css代码，这很容易管理。

<style>
.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;
}
</style>

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

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

2 个答案: