CSS 相对 div 的宽度由绝对 div 自动扩展 [英] CSS relative div's width auto extend by absolute div

问题描述

是否可以让父级(位置:相对)通过其绝对子级自动扩展其宽度?这是我的 jsfiddle 链接:http://jsfiddle.net/YD2Xu/

理想的情况是#container 和#full-width 应该与#large-width 具有相同的宽度.

CSS:

#container {位置:相对；边框:1px纯绿色；}#大宽，#全宽{显示:表；位置:绝对；}#大宽度{空白:不换行；宽度:1500px；高度:200px；边框:1px纯红色；}#全屏宽度 {顶部:30px；宽度:100%；边框:1px纯蓝色；}

HTML:

<div id="大宽度">这是大宽度
<div id="全宽">这是全宽

我需要通过 css 来实现，不要使用 javascript.有谁知道怎么做?

非常感谢.

解决方案

如果 child 的位置是绝对的，则不能根据 child 的大小扩展 parent 的 div，因为具有绝对位置的元素会从流中移除，因此它们的大小和甚至被其他元素(包括父元素)忽略.您可以使用 CSS 或使用 javascript 设置固定大小.

Is it possible to get parent (position: relative) auto extend its width by its absolute child? Here is my jsfiddle link: http://jsfiddle.net/YD2Xu/

The ideal is #container and #full-width should have the same width as #large-width.

CSS:

#container {
    position: relative;
    border: 1px solid green;
}
#large-width, #full-width {
    display: table;
    position: absolute;
}
#large-width {
    white-space: no-wrap;
    width: 1500px;
    height: 200px;
    border: 1px solid red;
}
#full-width {
    top: 30px;
    width: 100%;
    border: 1px solid blue;
}

HTML:

<div id="container">
    <div id="large-width">
        this is large width
    </div>
    <div id="full-width">
        this is full width
    </div>
</div>

I need to implement this by css, don't use javascript. Does anyone know how to do it?

Thank you so much.

解决方案

You can't expand parent's div according to the child's size if child's position is absolute, because elements with absolute position are removed from the flow, so their size and even being are ignored by other elements including the parent. You can set fixed size with CSS or use javascript.

这篇关于CSS 相对 div 的宽度由绝对 div 自动扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！