Question

父div必须完全包含子div的内容。由于奇怪的情况，该子div可能比页面视图本身更宽。问题是，父div似乎总是限于页面宽度，无论它包含什么。

包含：

<div class="outer clearfix">
    <div class="inner">Oversized content here.</div>
</div>

.inner{
    background-color:red;
    height:50px;
    width:1800px;
}

.outer{
    border:5px solid blue;
    /* overflow:hidden; */
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

在这个例子中，我需要外部div（带有蓝色边框）围绕孩子的内容展开。

我之前遇到过这个问题 - 关于“身体”风格的古怪渲染 - 但这次我再也无法找到类似的问题了。将溢出设置为隐藏为父级只会切断子元素。我总是可以在加载后输入一个js来调整大小，但我宁愿避免这种情况。有什么想法吗？

谢谢，杰里米

PS我看到这个类似的项目，但答案是jquery。这可能只是它的方式： https://stackoverflow.com/questions/8360465/expand-parent-div-width-to-fit-children-divs-horzontal-scroll-website

Answer 1

你想要什么类似于收缩包装。 http://jsfiddle.net/e5Lkq/2/

.outer { display: table }

要获得旧的IE支持，您可以在inline-block容器内使用block（在默认的内联元素上）。请参阅this和this（如果您真的关心支持）。但我强烈鼓励你放弃支持（如果可以的话）。 8％的额外费用是否值得？另请注意，百分比因站点而异。

Answer 2

浮动父级似乎有效：

.outer{
    border:5px solid blue;
    float:left;

}

请参阅：http://jsfiddle.net/n6WLG/

当大于页面宽度时，将父div扩展为子大小

2 个答案: