我有以下代码:
<head>
<style>
#mainDiv {
background-color: grey;
position: absolute;
}
#one {
height: 150px;
width: 70px;
bottom: 300px;
right: 500px;
background-color: green;
position: absolute;
}
#two {
height: 200px;
width: 200px;
margin-top: 50px;
margin-bottom: 20px;
margin-left: 90px;
margin-right: 5px;
background-color: blue;
position: absolute;
}
</style>
</head>
<body>
<div id="mainDiv">
<div id="one"></div>
<div id="two"></div>
</div>
</body>
我想调整 #mainDiv 的大小，以便它将包含其子级，并考虑所有定位和边距属性(基本上 #mainDiv 的灰色区域将围绕子级并直观地显示定位和边距空间)。
我知道它不能使用 CSS 动态完成。我如何使用纯 JavaScript 而不使用 JQuery 来实现这样的功能？
注意:子项的位置属性没有限制，可以是其中任何一个，但“固定”。
代码需要支持所有主流浏览器+IE8+手机(android 2.3+4、iphone)。
谢谢!
最佳答案
对第二个 div 使用相对位置，以便 mainDiv 灰色区域将围绕您的子元素
#mainDiv {
background-color: grey;
position: absolute;
}
#one {
height: 150px;
width: 100px;
bottom: 300px;
right: 500px;
background-color: yellow;
}
#two {
height: 200px;
width: 200px;
margin-top: 50px;
margin-bottom: 20px;
margin-left: 90px;
margin-right: 5px;
background-color: blue;
position: relative;
}
关于javascript - 动态调整带有 "position: absolute"子元素的 div 元素的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13800172/