我有父 block (红色)，它应该根据绿色 block 内填充的内容相对于高度改变其大小。
绿色方 block 有绝对位置，这是必须的。
题目是关于绿色 block 的内容填充和红色 block 的逻辑自动大小变化。
所以，2 个问题:
- 如何通过水平/中心居中绿色 block ？
- 如何根据绿色 block 的内容填充自动改变红色 block 的高度？
<body>
<div class="some"></div>
<div class="container">
<div class="main">
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
</div>
</body>
body {
background: purple;
}
.some {
height: 100px;
}
.container {
width: 1030px;
height: 600px;
background: red;
position: relative;
margin: auto;
}
.main {
position: absolute;
background: green;
margin-top: -50px;
width: 400px;
}
.content {
width: 300px;
height: 100px;
background: blue;
margin: 20px auto;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
最佳答案
我在这里创建了一个示例解决方案 https://jsfiddle.net/saksham_malhotra/upnrfjm0/
你的代码中有很多不必要的东西，我已经写了一个简化版本。关键是要注意 display 属性以获得良好的布局。
您无需将左侧部分设置为 absolute 定位即可将其固定在左侧。只需让包装容器 display: block 不占用整个宽度即可。
关于html - 当此 block 内部存在获取内容的位置绝对 block 时，如何强制自动更改父 block 高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56099471/