2

子元素不拉伸父容器。

我的代码：

html:

<div class='window'>
    <div class='wrapper'>
        <div class='short'>short</div>
        <div class='long'>long</div>
    </div>
</div>

CSS：

.window{
    width: 500px;
    height: 100px;
    overflow: auto;
    background: gray;
}

.wrapper{
    background: pink;
    border: 1px solid red;
}

.long{
    width: 700px;
    background: beige;
}

例子

我想.long舒展他的父母.wrapper。 .wrapper宽度必须与.long(700px) 相同。

我可以通过设置float: left来达到这一点.wrapper。

但是这里发生了什么我不明白，为什么它有帮助？这种行为的机制是什么？我需要解释，带有指向 w3c 文档的链接。

我还能做些什么来扩展.wrapper宽度？

4

2 回答 2

3

By default, the .wrapper div is inheriting the fixed width you set on .window. You can float the .wrapper and set it's width to auto so the width expands without restriction to the parent.

CSS:

.wrapper {
    float: left;
    width: auto;
}

Example: http://jsfiddle.net/WTGAc/3/

Theory:

By default, the dimensions of wrapper are constained to the dimensions placed on it's parent, .window.

Floated elements still live within the parameters defined by their parent element, ie the width available and horizontal position. They still interact with text and other elements inside that parent element (or other following elements). In that respect, they are quite different from absolutely positioned elements, which are removed from the document flow and don't interact with other elements ... but even then, if they have a positioned ancestor then they are restricted by the envelope of that ancestor and will use that as the basis for calculating size and dimension (although they can still be made to extend or exist outside that positioned ancestor).

Source of Quote

Since the element is floated and set outside of the normal document flow, it can now expand to the true width of the parent, instead of the fixed width initially defined.

于 2013-05-24T15:01:39.613 回答
2

宽度和 CSS 视觉格式模型

在您的示例中，您具有以下内容：

<div class='window'>
    <div class='wrapper'>
        <div class='short'>short</div>
        <div class='long'>long</div>
    </div>
</div>

在最简单的情况下，.window是具有固定宽度（500px）的包含块。子元素.wrapper从 继承宽度.window。该.long元素的宽度为 700px，它将触发溢出条件。由于.window已overflow: auto声明，该.window元素将生成一个水平滚动条。请注意，通过使用overflow: auto,.window建立了一个新的块格式化上下文，这就是为什么出现水平滚动条.window而不是 viewport/root 元素的原因。

当您.wrapper向左浮动时，该.wrapper元素定义了一个额外的块格式化上下文。一个新的块格式化上下文将忽略从其包含块继承的宽度，并计算一个足以包含内容的新宽度（缩小以适应），这就是为什么粉红色背景从.wrapper现在开始扩展整个 700px 的宽度。

position: relative您可以通过添加to.window和position: absoluteto来触发相同的效果.wrapper。但是，这是可行的，因为您将高度设置为.window，否则，.window高度将计算为零，因为绝对元素不在流中，并且（与浮动不同）将不再影响.window内容的布局方式（不影响高度）案子）。

顺便说一句，您也可以尝试使用float: lefton而不是使用它，这也将建立一个新的块格式化上下文，但这次滚动条出现在 on而不是..wrapperoverflow: auto.wrapper.window

w3.org 的相关文档是：

10 视觉格式化模型细节
10.3 计算宽度和边距
10.3.5 浮动、不可替换元素

链接： http ://www.w3.org/TR/CSS2/visudet.html#float-width

于 2013-05-24T16:11:11.603 回答