CSS 定位：容器不适合其内容大小
HTML:
<div content>
<div post>
<div post>
...
</div>
CSS:
.post {
margin: 0; padding: 110px 20px 20px;
float: left;
width: 560px;
position: relative;
display: block;
}
#content {
display: block;
padding: 15px;
overflow: visible // hidden
min-height: 250px;
}
当#content设置为overflow:visible时，它不适合其内容size 即每个帖子都可以很好地显示，但 #content height 是其最小高度。
设置 overflow:hidden 时，#content 会根据其内容调整其大小，但 .post 会被剪切为 #content 指标。 .post 包含位于 .post 外部且边距为负的 position:absolute 元素。
#content 能否适合 .post 的高度，同时又不会在两侧被剪切？
HTML:
<div content>
<div post>
<div post>
...
</div>
CSS:
.post {
margin: 0; padding: 110px 20px 20px;
float: left;
width: 560px;
position: relative;
display: block;
}
#content {
display: block;
padding: 15px;
overflow: visible // hidden
min-height: 250px;
}
When #content is set to overflow:visible, it doesn't fit to its content size i.e. each post is well displayed, but #content height is its min-height.
When overflow:hidden is set, #content adapts its size to its content, but the .post's are cut to the #content metrics. .post contains position:absolute elements located outside of .post with negative margins.
Can #content fit to .post's height and at the same time not cut it on the sides?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
如果您将东西漂浮在具有
min-height属性的容器内，则它不会扩展。您需要清除.post上的浮动，然后容器将按预期增长。If you have things floated inside a container with a
min-heightproperty, it won't expand. You need to clear the float on.postand then the container will grow as it's supposed to.这就是你想做的吗？
http://jsfiddle.net/k4t434sispho3nix/swwTn/
Is this what you're trying to do?
http://jsfiddle.net/k4t434sispho3nix/swwTn/
您对此有何看法...
http://jsfiddle.net/UnsungHero97/dBMxE/2/< /a>
尝试插入更多或删除
元素。我希望这有帮助。
What do you think about this...
http://jsfiddle.net/UnsungHero97/dBMxE/2/
Try inserting more or taking out
<div class="post"></div>elements.I hope this helps.
尝试将容器的溢出属性更改为“auto”；它对我有用：
https://stackoverflow.com/a/17807687/888367
Try changing container's overflow property to "auto"; it worked for me:
https://stackoverflow.com/a/17807687/888367