Question

看看这个jsfiddle：

#content {
    background: #ff0000;
    min-height: 200px;
}
.container-fluid {
    min-width: 2000px;
}

<div id="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <h1>Some title here</h1>
            </div>
        </div>
    </div>
</div>

为什么#content的宽度不能拉伸到2000px而不是视口的宽度？我需要做些什么才能使内容伸展，这样无论在容器上设置什么样的最小宽度，#content总会拉伸以适应它

Answer 1

将#content设置为inline-block，然后将min-width设置为100%。请注意，将width设置为100%不会产生预期效果。

#content {
    background: #ff0000;
    min-height: 200px;
    min-width: 100%;
    display:inline-block;
}

Answer 2

添加float将使父元素的宽度与子元素相同：

#content {
    background: #ff0000;
    min-height: 200px;
    float: left;
}

Answer 3

#content {
    background: #ff0000;
    min-height: 200px;
    display: inline-block;
}

Answer 4

您可以使用

width:auto;

这应该意味着它会延伸到其内容的宽度。

编辑：

CSS中的min-width属性用于设置指定元素的最小宽度。 min-width属性始终覆盖width属性，无论是在声明中的width之前还是之后。作者可以使用任何长度值，只要它们是正值。

您需要使用它设置最大宽度或宽度。假设您的宽度为80％，最小宽度为400px，即使页面的80％为200px，它也不会小于400px。

你可以给内容一个最小宽度，强制div为auto，并且不小于内容。

Answer 5

#content可以确定宽度，而.container-fluid会扩展以填充它吗？而不是相反。

#content {
    background: #ff0000;
    min-height: 200px;
    width:2000px;
}
.container-fluid {
    width: 100%;
}

Answer 6

添加

position:absolute

到#content的CSS声明，你强制CSS解释器检查#content里面的元素，从而达到预期的效果。

绝对定位的问题在于它从文档的自然工作流中删除元素。因此，您最好将元素包装到要在其他元素中应用绝对位置的元素。这个将保留在DOM的自然工作流程中。

请参阅此jsfiddle：https://jsfiddle.net/7Ls47d83/4/

Google＆＃34; CSS box model＆＃34;有关此更多有趣的文章和帖子，或this article。

为什么父div宽度不会延伸到子宽度

6 个答案: