调整div及其内容的高度和宽度
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了调整div及其内容的高度和宽度相关的知识，希望对你有一定的参考价值。
我正在尝试调整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>
答案
我不确定您为什么不能这样做：
也将
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>以上是关于调整div及其内容的高度和宽度的主要内容，如果未能解决你的问题，请参考以下文章