gpt4 book ai didi

html - 当此 block 内部存在获取内容的位置绝对 block 时,如何强制自动更改父 block 高度?

转载 作者:行者123 更新时间:2023-11-27 23:58:57 25 4
gpt4 key购买 nike

我有父 block (红色),它应该根据绿色 block 内填充的内容相对于高度改变其大小。

绿色方 block 有绝对位置,这是必须的。

题目是关于绿色 block 的内容填充和红色 block 的逻辑自动大小变化。

所以,2 个问题:

  1. 如何通过水平/中心居中绿色 block ?
  2. 如何根据绿色 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;
}

http://jsfiddle.net/xtupmyvf/2/

最佳答案

我在这里创建了一个示例解决方案 https://jsfiddle.net/saksham_malhotra/upnrfjm0/

你的代码中有很多不必要的东西,我已经写了一个简化版本。关键是要注意 display 属性以获得良好的布局。

您无需将左侧部分设置为 absolute 定位即可将其固定在左侧。只需让包装容器 display: block 不占用整个宽度即可。

关于html - 当此 block 内部存在获取内容的位置绝对 block 时,如何强制自动更改父 block 高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56099471/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com